/* Demo app (dark) */
.bar{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s2);height:56px;border-bottom:1px solid var(--line);background:var(--bg);flex-wrap:nowrap}
.bar .tag{color:var(--muted);font-size:13px;flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow:hidden}
.bar .back{color:var(--muted);text-decoration:none;font-size:14px;white-space:nowrap}
.bar .back:hover{color:var(--fg)}
.notice{margin:var(--s1) var(--s2) 0;padding:var(--s1) var(--s2);border:1px solid var(--model);border-radius:var(--r);background:var(--surface);color:var(--fg);font-size:14px}
.onboard{margin:var(--s2) var(--s2) 0;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:0 var(--s3)}
.onboard>summary{cursor:pointer;font-weight:600;font-size:16px;min-height:48px;display:flex;align-items:center;list-style:none;gap:var(--s1)}
.onboard>summary::-webkit-details-marker{display:none}
.onboard>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.onboard[open]>summary::before{transform:rotate(45deg)}
.steps3{margin:0 0 var(--s2);padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);counter-reset:s}
.steps3 li{counter-increment:s;border-top:1px solid var(--line-2);padding-top:var(--s1);color:var(--muted);font-size:14px}
.steps3 li::before{content:counter(s);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--fg);font:600 12px var(--mono);margin-bottom:6px}
.steps3 b{display:block;color:var(--fg);font-weight:600;font-size:15px;margin-bottom:2px}
.about{margin:0 0 var(--s2);color:var(--muted);font-size:14px;max-width:80ch}
.about b{color:var(--fg);font-weight:600}
.guide{display:flex;gap:var(--s1);align-items:center;padding:var(--s2);flex-wrap:wrap}
.guide-h{font-weight:600;margin-right:var(--s1);font-size:14px;color:var(--muted)}
.guide .btn{min-height:40px;padding:0 var(--s2);font-size:14px}
.guide .btn b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-2);color:var(--muted);font:600 11px var(--mono)}
.guide .btn[aria-pressed=true]{border-color:var(--bad)}
.alert{margin:0 var(--s2) var(--s2);padding:var(--s2);border:1px solid var(--bad);border-left-width:4px;border-radius:var(--r);background:var(--surface)}
.alert h3{font-size:16px;color:var(--bad);margin-bottom:var(--s1)}
.alert ul{margin:0;padding-left:var(--s3);color:var(--muted);font-size:14px}
.cols{display:grid;gap:var(--s2);padding:0 var(--s2) var(--s2);grid-template-columns:minmax(320px,5fr) minmax(0,6fr);align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:var(--s2);min-width:0}
.panel h2{font-size:16px;margin-bottom:var(--s1)}
.muted,.hint{color:var(--muted);font-size:14px;font-weight:400}
.hint{margin:0 0 var(--s1)}
label{display:block;font-weight:500;font-size:14px;margin:var(--s2) 0 4px}
textarea,input{width:100%;font:14px var(--mono);padding:var(--s1);border:1px solid var(--line-2);border-radius:8px;background:var(--bg);color:var(--fg)}
textarea{resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{font:13px var(--font);text-align:left;padding:6px 12px;min-height:34px;border-radius:99px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);cursor:pointer}
.chip:hover,.chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.graph-box{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--bg);height:clamp(300px,52vh,560px);overflow:hidden}
#graph{width:100%;height:100%;display:block;touch-action:manipulation}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;text-align:center;padding:var(--s3);color:var(--muted)}
.empty b{color:var(--fg)}
.empty[hidden]{display:none}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px var(--s2);margin:var(--s1) 0 0;padding:0;font-size:13px;color:var(--muted)}
.sw{display:inline-block;width:20px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}
.sw.good{background:var(--good);opacity:.85}.sw.warn{background:var(--model);opacity:.5}.sw.path{background:var(--map);height:6px}
.sw.model{background:repeating-linear-gradient(90deg,var(--model) 0 6px,transparent 6px 9px);height:6px}.sw.bad{background:var(--bad);height:6px}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin-bottom:var(--s1)}
.ctr{position:relative;border:1px solid var(--line);border-radius:8px;padding:var(--s1);background:var(--bg);cursor:help}
.ctr b{display:block;font-size:26px;line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums}
.ctr span{font-size:12px;color:var(--muted)}
.tip{position:absolute;left:0;top:calc(100% + 6px);z-index:5;width:max(100%,200px);max-width:260px;padding:8px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--fg);font:400 12px/1.45 var(--font);font-style:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s}
.ctr:hover .tip,.ctr:focus .tip,.ctr:focus-within .tip{opacity:1;visibility:visible}
.ctr:nth-child(4) .tip,.ctr:nth-child(3) .tip{left:auto;right:0}
.steps{list-style:none;margin:0;padding:0;max-height:clamp(200px,38vh,420px);overflow:auto}
.steps li{display:grid;grid-template-columns:auto auto 1fr auto;gap:var(--s1);align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.steps li.fail{color:var(--bad)}
.steps .act{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere;min-width:0}
.steps .ms{color:var(--muted);font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px}
.results{margin:0 var(--s2) var(--s4);padding:var(--s2);background:var(--surface);border:1px solid var(--line);border-radius:12px}
.results h2{font-size:16px;margin-bottom:var(--s1)}
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:8px var(--s1);border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500}
td.n{font-variant-numeric:tabular-nums;font-family:var(--mono)}
/* graph */
.edge{fill:none;stroke-linecap:round}
.edge.good{stroke:var(--good);opacity:.85;stroke-width:1.8}
.edge.warn{stroke:var(--model);opacity:.5;stroke-width:1.8}
.edge.bad{stroke:var(--bad);opacity:.8;stroke-width:1.8}
.edge.idle{stroke:var(--idle);opacity:.6;stroke-width:1.5}
.edge.path{stroke:var(--map);opacity:1;stroke-width:3.5}
.edge.model{stroke:var(--model);opacity:1;stroke-width:3.5}
.edge.failed{stroke:var(--bad);opacity:1;stroke-width:3.5;stroke-dasharray:6 4}
.node circle{fill:var(--surface-2);stroke:var(--idle);stroke-width:2}
.node.path circle{stroke:var(--map);stroke-width:3.5}
.node.model circle{stroke:var(--model);stroke-width:3.5;stroke-dasharray:4 3}
.node text{font:11px var(--mono);fill:var(--fg);paint-order:stroke;stroke:var(--bg);stroke-width:3px;pointer-events:none}
.chat{display:flex;flex-direction:column;gap:var(--s1);min-height:480px}
.thread{display:flex;flex-direction:column;gap:var(--s2);max-height:clamp(320px,56vh,620px);overflow:auto;padding:var(--s1) 2px}
.msg{display:flex;gap:var(--s1);align-items:flex-start;min-width:0}
.msg.user{justify-content:flex-end}
.av{flex:none;width:28px;height:28px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--fg);display:grid;place-items:center;font:600 13px var(--font)}
.bubble{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:var(--s1) var(--s2);min-width:0;max-width:100%;font-size:15px;overflow-wrap:anywhere}
.bubble p{margin:0 0 4px}
.msg.user .bubble{background:var(--accent-soft);border-color:#22406e;max-width:85%}
.run-status{display:flex;align-items:center;gap:var(--s1);font-size:14px;color:var(--muted)}
.run-status.err{color:var(--bad)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1s infinite}
.dot.off{animation:none;background:var(--idle)}
details.steplist{margin-top:var(--s1)}
details.steplist summary{cursor:pointer;font-size:13px;color:var(--muted);min-height:28px}
.steplist .steps{max-height:240px}
.result{margin-top:var(--s1);border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:var(--s1) var(--s2);background:var(--surface)}
.result.ok{border-left-color:var(--good)}.result.fail{border-left-color:var(--bad)}
.result h3{font-size:15px;margin-bottom:4px}
.result dl{display:flex;flex-wrap:wrap;gap:4px var(--s2);margin:4px 0 0;font-size:13px;color:var(--muted)}
.result dt{display:inline}.result dd{display:inline;margin:0 0 0 4px;color:var(--fg);font-weight:600}
.composer{display:flex;gap:var(--s1);align-items:flex-end;margin-top:auto}
.composer textarea{flex:1 1 auto;width:auto;min-width:0;font:15px var(--font)}
.composer .btn{flex:none}
.adv{font-size:13px;color:var(--muted)}.adv summary{cursor:pointer;min-height:28px}
.adv input{margin-top:4px}
@keyframes blink{50%{opacity:.25}}
@keyframes enter{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes draw{from{stroke-dashoffset:var(--len,200)}to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 2px var(--model))}50%{filter:drop-shadow(0 0 8px var(--model))}}
.node.enter{animation:enter .5s ease-out;transform-box:fill-box;transform-origin:center}
.edge.enter{stroke-dasharray:var(--len,200);animation:draw .6s ease-out}
.edge.path{animation:pulse 1.6s ease-in-out infinite}
.edge.learned{animation:glow 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.node.enter,.edge.enter,.edge.path,.edge.learned,.dot{animation:none}.tip{transition:none}}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}.guide .btn{flex:1 1 calc(50% - 8px)}.guide-h{width:100%}.steps3{grid-template-columns:minmax(0,1fr);gap:var(--s2)}}
.msg.bot .bubble{flex:1}
@media (max-width:700px){.graph-box{height:320px}.steps li{grid-template-columns:auto auto 1fr}.steps li .ms:last-child{grid-column:3;justify-self:start}.thread{max-height:none}.bar .tag{display:none}.bar{justify-content:space-between}.onboard{padding:0 var(--s2)}}
@media (max-width:520px){.counters{grid-template-columns:1fr 1fr}.ctr:nth-child(odd) .tip{left:0;right:auto}.ctr:nth-child(even) .tip{left:auto;right:0}}