@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13px;color:#d7dee8;background:#0a0f18;--bg:#0a0f18;--panel:#0f1622;--panel2:#141d2c;--line:#1f2a3b;--line2:#2a3749;--muted:#8391a6;--dim:#5b6a80;--teal:#3fd0b5;--purple:#a99bff;--amber:#f0b35f;--red:#f0717a;--blue:#6fb4f7;--green:#4ade80;--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;--bar:40px}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:0;overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:wait}
.sr-only{position:absolute;left:-9999px}.skip{position:absolute;left:-9999px;top:6px;background:var(--teal);color:#06131f;padding:6px 10px;border-radius:4px}.skip:focus{left:6px;z-index:30}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--panel2)}
.bar{height:var(--bar);display:flex;align-items:center;gap:10px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;color:#fff}.sep{width:1px;height:18px;background:var(--line2)}
.bar h1{font-size:13px;font-weight:600;margin:0;padding:2px 6px;border-radius:4px;max-width:38vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.bar h1[contenteditable=true]{outline:1px dashed var(--line2)}
.meta{color:var(--dim);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}.grow{flex:1}
.state{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line2);border-radius:4px;padding:2px 8px;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}.state.busy{color:var(--teal);border-color:var(--teal)}.state.error{color:var(--red);border-color:var(--red)}
.actions{display:flex;gap:4px}.actions button,.actions a{background:transparent;border:1px solid var(--line2);border-radius:4px;padding:3px 9px;font-size:11.5px;color:var(--muted)}.actions button:hover,.actions a:hover{color:#fff;border-color:var(--muted)}.actions button[aria-pressed=true]{color:var(--teal);border-color:var(--teal)}
.work{display:grid;grid-template-columns:380px minmax(0,1fr);height:calc(100vh - var(--bar))}.work.no-trace{grid-template-columns:0 minmax(0,1fr)}.work.no-trace .trace-col{display:none}
.trace-col{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--bg);min-width:0}
.runs{flex:1;overflow-y:auto;padding:8px 8px 4px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
.intro{padding:6px 4px}.eyebrow{margin:0 0 6px;font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--teal)}.intro p{margin:0 0 8px;color:var(--muted);line-height:1.5}.examples{display:flex;flex-direction:column;gap:4px;margin:6px 0 10px}.examples button{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:6px 9px;font-size:12px;color:#c9d3e0}.examples button:hover{border-color:var(--teal)}.fine{font-size:11px;color:var(--dim)}
.run{border:1px solid var(--line);border-radius:6px;background:var(--panel)}.run>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:12.5px;color:#e6ecf5}.run>summary::-webkit-details-marker{display:none}.run>summary::before{content:'▸';color:var(--dim);font-size:11px;width:10px;flex-shrink:0}.run[open]>summary::before{content:'▾'}
.run .q{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.run .stat{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}.run.running .stat{color:var(--teal)}
.steps{padding:2px 8px 6px 8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.step{display:flex;gap:6px;align-items:baseline;font-size:11.5px;line-height:1.45;padding:1px 0;min-width:0}.step .t{font-family:var(--mono);font-size:10px;color:var(--dim);width:42px;flex-shrink:0;text-align:right}
.step.status{color:var(--dim);font-style:italic}.step.thought{color:#c9d3e0}.step.thought::before{content:'›';color:var(--purple)}.step.plan ol{margin:0;padding-left:18px;color:#c9d3e0}
.step.tool{font-family:var(--mono);font-size:11px;flex-wrap:wrap}.step.tool b{color:var(--purple);font-weight:500}.step.tool .args{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;flex:1;min-width:0}.step.tool .res{color:var(--dim);flex-basis:100%;padding-left:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step.tool .res.ok::before{content:'✓ ';color:var(--teal)}.step.tool .res.err{color:var(--red)}.step.tool .res.err::before{content:'✗ '}.step.tool .wait{color:var(--amber)}
.step.err{color:var(--red)}.step.warn{color:var(--amber)}
.answer{margin:4px 0 0;padding:6px 8px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:#e2e8f0}.answer.live::after{content:'▍';color:var(--teal);animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}
.answer p{margin:0 0 6px}.answer p:last-child{margin:0}.answer a{color:var(--teal)}.answer ul,.answer ol{margin:0 0 6px;padding-left:18px}.answer code{font-family:var(--mono);font-size:11px;background:var(--panel2);padding:0 4px;border-radius:3px}.answer pre{background:var(--panel2);padding:6px;border-radius:4px;overflow:auto;font-size:11px}.answer h1,.answer h2,.answer h3{font-size:12.5px;margin:8px 0 4px;color:#fff}.answer table{border-collapse:collapse;font-size:11.5px}.answer td,.answer th{border:1px solid var(--line);padding:2px 6px}.answer blockquote{border-left:2px solid var(--line2);margin:0 0 6px;padding-left:8px;color:var(--muted)}
.prompt-box{border-top:1px solid var(--line);padding:6px 8px 8px;background:var(--panel)}.prompt-box textarea{width:100%;resize:none;background:var(--bg);border:1px solid var(--line2);color:#fff;border-radius:5px;padding:7px 9px;font:inherit;font-size:12.5px;line-height:1.45;min-height:40px;max-height:200px}.prompt-box textarea:focus{outline:none;border-color:var(--teal)}
.prompt-row{display:flex;align-items:center;gap:6px;margin-top:5px}.hint{flex:1;font-size:10.5px;color:var(--dim);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.prompt-row button{border:1px solid var(--line2);background:var(--panel2);border-radius:4px;padding:4px 10px;font-size:12px;font-weight:500}#send{background:var(--teal);color:#06131f;border-color:var(--teal)}
.note-bar{margin:0;padding:8px 10px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.note-bar a{color:var(--teal)}
.board{position:relative;overflow-y:auto;padding:8px;min-width:0}
.panels{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.panels.cols-1{grid-template-columns:1fr}.panels.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 8px 8px;min-width:0;display:flex;flex-direction:column;animation:rise .25s ease}.panel.full{grid-column:1/-1}.panel.selected{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}.panel.focus{position:absolute;inset:8px;z-index:5;grid-column:auto}.panel.focus .chart{height:calc(100vh - var(--bar) - 90px)}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.panel-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;min-width:0}.panel-head h3{margin:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.panel-head small{color:var(--dim);font-size:10.5px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.panel-tools{display:flex;gap:3px;margin-left:auto;flex-shrink:0}.panel-tools button{background:none;border:1px solid transparent;color:var(--dim);border-radius:3px;font-size:10.5px;padding:1px 5px;font-family:var(--mono)}.panel-tools button:hover{color:#fff;border-color:var(--line2)}
.chart{height:clamp(300px,46vh,600px);position:relative}.panel.half .chart{height:clamp(240px,34vh,420px)}
.chart-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--muted);margin-top:4px;font-family:var(--mono)}.chart-legend i{display:inline-block;width:8px;height:8px;border-radius:1px;margin-right:5px;vertical-align:-1px}.chart-legend b{color:#e6ecf5;font-weight:500}.chart-legend .up{color:var(--green)}.chart-legend .down{color:var(--red)}
.note{font-size:12.5px;line-height:1.5;color:#cdd6e1}.note h1,.note h2,.note h3,.note h4{margin:10px 0 4px;font-size:13px;color:#fff}.note h1{font-size:15px}.note p{margin:0 0 8px}.note ul,.note ol{margin:0 0 8px;padding-left:18px}.note li{margin:2px 0}.note a{color:var(--teal)}.note code{font-family:var(--mono);background:var(--panel2);padding:0 4px;border-radius:3px;font-size:11.5px}.note pre{background:var(--panel2);padding:8px;border-radius:4px;overflow:auto;font-size:11.5px}.note blockquote{border-left:2px solid var(--line2);margin:0 0 8px;padding-left:10px;color:var(--muted)}.note table{border-collapse:collapse;font-size:11.5px;margin:0 0 8px}.note td,.note th{border:1px solid var(--line);padding:3px 7px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}.metrics article{background:var(--panel2);border-radius:4px;padding:8px 10px}.metrics span{display:block;font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.metrics strong{display:block;font-size:18px;margin-top:2px;font-family:var(--mono);font-weight:500;color:#fff}.metrics small{color:var(--teal);font-size:11px;font-family:var(--mono)}
.table-scroll{overflow:auto;max-height:360px}table.data{width:100%;border-collapse:collapse;font-size:11.5px;font-family:var(--mono)}table.data th{position:sticky;top:0;background:var(--panel);text-align:right;color:var(--muted);font-weight:500;padding:4px 6px;border-bottom:1px solid var(--line)}table.data td{text-align:right;padding:3px 6px;border-bottom:1px solid rgba(31,42,59,.7)}table.data th:first-child,table.data td:first-child{text-align:left}
.graph-wrap{position:relative}.graph{width:100%;height:auto;display:block;background:radial-gradient(circle at 1px 1px,#1f2a3b 1px,transparent 1px) 0 0/22px 22px;border-radius:4px}.graph-node{cursor:pointer}.graph-node:hover circle{stroke-width:3}.graph-node text{pointer-events:none;font-size:10px;fill:#dce4ed}.graph-hint{font-size:11px;color:var(--dim);margin:6px 0 0}
.empty{border:1px dashed var(--line2);border-radius:6px;padding:26px;text-align:center;color:var(--dim);font-size:12.5px}.empty p{margin:0}
.overlay{position:fixed;inset:0;background:rgba(4,8,14,.7);display:flex;align-items:center;justify-content:center;z-index:40}.sheet{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:16px 20px;min-width:320px}.sheet h2{margin:0 0 10px;font-size:14px}.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 12px;font-size:12.5px}.sheet dt{font-family:var(--mono);color:var(--teal)}.sheet dd{margin:0;color:var(--muted)}.sheet button{border:1px solid var(--line2);background:var(--panel2);border-radius:4px;padding:4px 10px}
@media(max-width:900px){body{overflow:auto}.work{display:flex;flex-direction:column;height:auto}.trace-col{order:2;border-right:0;border-top:1px solid var(--line);max-height:70vh}.board{order:1;min-height:40vh;overflow:visible}.panels,.panels.cols-3{grid-template-columns:1fr}.panel.focus{position:static}.chart,.panel.half .chart{height:clamp(260px,42vh,420px)}.bar{gap:6px;padding:0 8px}.bar h1{max-width:36vw;padding:2px 3px}.sep,.meta,.actions #grid,.actions #toggle-trace,.actions #export,.actions #new-dash{display:none}.state{max-width:88px;padding:2px 6px}.actions button,.actions a{padding:3px 7px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}