:root{
  color-scheme:dark;--ink:#0d0f0e;--surface:#151816;--surface-2:#1b1f1c;--surface-3:#222723;
  --line:#313732;--line-soft:#262b27;--text:#f4f1e9;--muted:#a7aaa3;--dim:#737972;
  --green:#19c37d;--green-deep:#0f8f5d;--coral:#e47d65;--amber:#e7bd65;--blue:#7c9de8;--red:#f06b72;
  --sans:Inter,"Segoe UI",ui-sans-serif,system-ui,sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:15px}button,input,textarea,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.topbar{height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px;border-bottom:1px solid var(--line-soft);background:#101210;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;width:max-content}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--green);color:#06150e;font:750 23px Georgia}.brand strong,.brand small{display:block}.brand strong{font-size:16px;letter-spacing:-.01em}.brand small{margin-top:3px;color:var(--dim);font:11px var(--mono)}.tabs{display:flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--line-soft);border-radius:10px;background:#0b0d0c}.tab{padding:8px 14px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:13px;cursor:pointer}.tab:hover{color:var(--text)}.tab.active{background:var(--surface-3);color:var(--text)}.runtime{justify-self:end;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.runtime i{width:8px;height:8px;border-radius:50%;background:var(--amber)}.runtime i.ok{background:var(--green);box-shadow:0 0 0 4px #19c37d18}
main,.view{height:calc(100vh - 68px)}.view{display:none}.view.active{display:block}.studio.active{display:grid;grid-template-columns:348px minmax(0,1fr);position:relative}.studio.lab-closed{grid-template-columns:0 minmax(0,1fr)}
.lab-panel{min-width:0;overflow:auto;padding:22px 20px 24px;border-right:1px solid var(--line-soft);background:#111412;transition:opacity .2s,transform .2s;z-index:8}.lab-closed .lab-panel{opacity:0;pointer-events:none;transform:translateX(-20px)}.lab-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}.kicker{color:var(--green);font:700 10px var(--mono);letter-spacing:.15em}.lab-heading h1{margin:7px 0 0;font-size:21px;letter-spacing:-.03em}.icon-button,.fit-button,.text-button{border:1px solid var(--line);background:var(--surface-2);cursor:pointer}.icon-button{width:34px;height:34px;border-radius:9px;font-size:18px}.icon-button:hover,.fit-button:hover{border-color:#566057;background:var(--surface-3)}.field{margin-bottom:17px}.field label,.run-control label,.compare-control label{display:block;margin-bottom:7px;color:#d1d3cd;font-size:12px;font-weight:650}.field label span{color:var(--dim);font-weight:400}.field small{display:block;margin-top:6px;color:var(--dim);font-size:11px;line-height:1.45}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-grid .field{margin-bottom:17px}.field-title{display:flex;align-items:center;justify-content:space-between}.text-button{padding:0;border:0;background:transparent;color:var(--green);font-size:11px}.text-button:hover{text-decoration:underline}textarea,input,select{width:100%;border:1px solid var(--line);border-radius:9px;background:#0c0f0d;color:var(--text)}textarea{padding:10px 11px;resize:vertical;line-height:1.55}input,select{height:39px;padding:0 10px}textarea:hover,input:hover,select:hover{border-color:#4b554d}#experiment-code{height:190px;min-height:130px;resize:vertical;color:#d9e9df;font:12px/1.6 var(--mono);tab-size:2}.token-field{margin-top:4px}.primary-button{width:100%;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border:0;border-radius:10px;background:var(--green);color:#06160e;font-weight:750;cursor:pointer;box-shadow:0 8px 24px #19c37d18}.primary-button:hover{background:#23d68c}.primary-button:disabled{opacity:.45;cursor:wait}.primary-button b{font-size:20px}
.canvas-shell{height:100%;min-width:0;min-height:0;display:grid;grid-template-rows:63px auto minmax(0,1fr) 72px;background:var(--ink);position:relative}.canvas-toolbar{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line-soft);background:#111412}.run-control{min-width:270px;max-width:430px;flex:1}.compare-control{width:230px}.run-control label,.compare-control label{margin:0 0 3px;color:var(--dim);font:10px var(--mono);letter-spacing:.08em}.run-control select,.compare-control select{height:31px;padding:0;border:0;border-radius:0;background:transparent;font-size:12px;text-overflow:ellipsis}.toolbar-actions{display:flex;align-items:center;gap:7px}.toolbar-actions .icon-button{width:31px;height:31px}#zoom-label{width:44px;text-align:center;color:var(--muted);font:11px var(--mono)}.fit-button{height:31px;padding:0 11px;border-radius:8px;color:var(--muted);font-size:11px}.comparison{display:flex;gap:20px;align-items:center;padding:9px 18px;border-bottom:1px solid #4d4430;background:#201d15;color:#ddd6c4;font-size:12px}.comparison.hidden{display:none}.comparison b{color:var(--amber)}.delta.good{color:var(--green)}.delta.bad{color:var(--coral)}
.canvas-toolbar{grid-row:1}.comparison{grid-row:2}.canvas-viewport{grid-row:3;position:relative;min-height:0;overflow:hidden;cursor:grab;background-color:#0d0f0e;background-image:linear-gradient(#24282488 1px,transparent 1px),linear-gradient(90deg,#24282488 1px,transparent 1px),linear-gradient(#171a1788 1px,transparent 1px),linear-gradient(90deg,#171a1788 1px,transparent 1px);background-size:80px 80px,80px 80px,20px 20px,20px 20px}.canvas-viewport.dragging{cursor:grabbing}.canvas-world{position:absolute;left:0;top:0;width:3000px;height:1800px;transform-origin:0 0;will-change:transform}.edge-layer,.node-layer{position:absolute;inset:0;width:100%;height:100%}.edge{fill:none;stroke:#4a514b;stroke-width:2}.edge.active{stroke:var(--green);stroke-width:2.5}.edge-label{fill:#788078;font:10px var(--mono)}
.flow-node{position:absolute;width:250px;min-height:126px;padding:15px 16px 13px;border:1px solid #394039;border-radius:13px;background:linear-gradient(145deg,#1b1f1c,#141714);box-shadow:0 14px 34px #0007;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s}.flow-node:hover{border-color:#667067;box-shadow:0 18px 42px #0009;transform:translateY(-2px)}.flow-node.selected{border-color:var(--green);box-shadow:0 0 0 3px #19c37d20,0 18px 42px #0009}.flow-node::before{content:"";position:absolute;left:-5px;top:24px;width:9px;height:9px;border:2px solid #141714;border-radius:50%;background:var(--node-color,var(--green))}.flow-node .node-top{display:flex;justify-content:space-between;align-items:center}.node-kind{color:var(--node-color,var(--green));font:700 10px var(--mono);letter-spacing:.12em}.node-time{color:var(--dim);font:10px var(--mono)}.flow-node h3{margin:10px 0 6px;font-size:16px;letter-spacing:-.015em}.flow-node p{height:36px;margin:0;color:var(--muted);font-size:12px;line-height:1.5;overflow:hidden}.node-foot{display:flex;justify-content:space-between;margin-top:10px;color:var(--dim);font:10px var(--mono)}.flow-node.input{--node-color:var(--green)}.flow-node.context{--node-color:var(--blue)}.flow-node.model{--node-color:#b59bea}.flow-node.tool{--node-color:var(--amber)}.flow-node.result{--node-color:var(--coral)}.flow-node.life{--node-color:#8b948c}.flow-node.error{--node-color:var(--red)}.lane-label{position:absolute;color:#59605a;font:700 11px var(--mono);letter-spacing:.14em}.empty-state{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}.empty-state.hidden{display:none}.empty-state span{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--green);font:28px Georgia}.empty-state h2{margin:0;font-size:18px}.empty-state p{margin:8px 0;color:var(--dim);font-size:12px}.canvas-hint{position:absolute;left:14px;bottom:12px;padding:6px 9px;border:1px solid var(--line-soft);border-radius:7px;background:#0d0f0ecc;color:var(--dim);font-size:10px;pointer-events:none}
.metrics-strip{grid-row:4;display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line-soft);background:#111412}.metrics-strip>div{display:grid;align-content:center;padding:0 14px;border-right:1px solid var(--line-soft)}.metrics-strip span{color:var(--dim);font-size:10px}.metrics-strip strong{margin-top:5px;font:650 14px var(--mono)}
.detail-drawer{position:absolute;z-index:15;top:0;right:0;width:min(430px,40vw);height:100%;display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);padding:21px 20px 0;border-left:1px solid var(--line);background:#131613f5;box-shadow:-18px 0 44px #0008;transform:translateX(102%);transition:transform .22s ease;backdrop-filter:blur(14px)}.detail-drawer.open{transform:none}.drawer-head{display:flex;align-items:start;justify-content:space-between}.drawer-head h2{margin:7px 0 0;font-size:21px}.detail-desc{margin:17px 0;color:var(--muted);font-size:13px;line-height:1.6}.detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:17px}.fact{padding:10px;border:1px solid var(--line-soft);border-radius:8px;background:#0d100e}.fact span,.fact strong{display:block}.fact span{color:var(--dim);font-size:10px}.fact strong{margin-top:5px;font:12px var(--mono);overflow:hidden;text-overflow:ellipsis}.payload-head{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line-soft);color:var(--muted);font-size:11px}#event-json{min-height:0;margin:0 -20px;padding:16px 20px;overflow:auto;border-top:1px solid var(--line-soft);background:#0a0c0a;color:#d3ded6;font:12px/1.65 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.page-view{height:100%;overflow:auto;padding:38px clamp(24px,5vw,76px);background:radial-gradient(circle at 80% 0,#17302555,transparent 30%),var(--ink)}.page-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:34px}.page-head h1{margin:8px 0 7px;font-size:34px;letter-spacing:-.04em}.page-head p{margin:0;color:var(--muted);font:12px var(--mono)}.arch-stats{display:flex;gap:28px}.stat{text-align:right}.stat strong,.stat span{display:block}.stat strong{font:650 22px var(--mono)}.stat span{margin-top:5px;color:var(--dim);font-size:10px}.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:13px}.pkg{padding:18px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,#191d1a,#121512);cursor:pointer;transition:.15s}.pkg:hover{border-color:#59645b;transform:translateY(-2px)}.pkg h3{margin:0 0 8px;color:var(--green);font:650 14px var(--mono)}.pkg p{height:42px;margin:0;color:var(--muted);font-size:12px;line-height:1.55;overflow:hidden}.pkg footer{display:flex;justify-content:space-between;margin-top:15px;color:var(--dim);font:10px var(--mono)}.deps{margin-top:11px;color:#ad9bd0;font:10px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.source-view{padding-bottom:0}.source-head{height:66px;display:flex;align-items:center;gap:20px;padding:0 16px;border:1px solid var(--line);border-radius:12px 12px 0 0;background:var(--surface)}.source-head>div{flex:1}.source-head strong{display:block;margin-top:5px;color:#dfe5df;font:12px var(--mono)}.source-head input{width:280px;height:34px}#source-code{height:calc(100vh - 210px);min-height:500px;margin:0;padding:18px;overflow:auto;border:1px solid var(--line);border-top:0;background:#0a0c0a;color:#d5e2d8;font:13px/1.65 var(--mono);white-space:pre-wrap}.line{display:block}.line i{display:inline-block;width:48px;margin-right:16px;color:#4d554f;text-align:right;font-style:normal;user-select:none}#toast{position:fixed;z-index:50;right:22px;bottom:22px;max-width:430px;padding:13px 16px;border:1px solid #6e4b43;border-radius:10px;background:#2b1915;color:#ffe3db;opacity:0;transform:translateY(12px);transition:.18s;pointer-events:none;font-size:13px}#toast.show{opacity:1;transform:none}
@media(max-width:1050px){.studio.active{grid-template-columns:300px minmax(0,1fr)}.detail-drawer{width:46vw}.compare-control{display:none}.metrics-strip{grid-template-columns:repeat(4,1fr)}.metrics-strip>div:nth-child(-n+3){display:none}}
@media(max-width:760px){.topbar{grid-template-columns:1fr auto}.tabs{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;justify-content:center}.runtime{display:none}.studio.active{grid-template-columns:1fr}.lab-panel{position:absolute;z-index:25;left:0;top:0;bottom:0;width:min(360px,92vw)}.studio.lab-closed .lab-panel{transform:translateX(-100%)}.detail-drawer{width:92vw}.canvas-toolbar{padding-left:12px}.page-view{padding:24px 16px 80px}.page-head{align-items:start;gap:30px}.arch-stats{display:none}}

/* Product UI refinement: semantic pipeline, flatter slate surfaces, user-controlled type scale. */
:root{--base-font-size:16px;--ink:#0a0e13;--surface:#111821;--surface-2:#16202a;--surface-3:#1c2833;--line:#33414d;--line-soft:#202b35;--text:#e7edf2;--muted:#9aa8b4;--dim:#687784;--green:#45d39b;--green-deep:#159568;--coral:#ef8b72;--amber:#e7bd65;--blue:#79a7e8;--red:#f16f78}
html{font-size:var(--base-font-size)}body{font-size:1rem;background:var(--ink);text-rendering:optimizeLegibility}
.topbar{background:#0d1319ee;border-color:var(--line-soft);backdrop-filter:blur(16px)}
.font-control{position:absolute;right:190px;top:15px;height:38px;display:flex;align-items:center;gap:7px;padding:0 8px;border:1px solid var(--line-soft);border-radius:10px;background:#080c10;color:var(--muted)}
.font-control-label{padding:0 4px;color:var(--text);font:700 .78rem var(--sans)}.font-control button{width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}.font-control button:hover{background:var(--surface-3);color:var(--text)}
.font-control input[type=range]{width:72px;height:3px;padding:0;border:0;border-radius:2px;background:var(--line);accent-color:var(--green);cursor:pointer}.font-control output{width:20px;color:var(--green);font:700 .68rem var(--mono);text-align:center}
.brand strong{font-size:1rem}.brand small{font-size:.66rem}.tab{font-size:.78rem}.runtime{font-size:.7rem}
.lab-panel{background:#0d1319;border-color:var(--line-soft);scrollbar-color:#35434e transparent}.lab-heading{margin-bottom:20px}.lab-heading h1{font-size:1.34rem;line-height:1.25}.kicker{font-size:.63rem}.lab-section-label{display:flex;align-items:center;gap:8px;margin:19px 0 11px;color:#7f8d98;font:700 .62rem var(--mono);letter-spacing:.14em}.lab-section-label::after{content:"";height:1px;flex:1;background:var(--line-soft)}.lab-section-label span{display:grid;place-items:center;width:23px;height:18px;border:1px solid #355446;border-radius:5px;color:var(--green);letter-spacing:0}
.field{margin-bottom:15px}.field label,.run-control label,.compare-control label{font-size:.75rem}.field small{font-size:.67rem}.field textarea,.field input,.field select{font-size:.84rem}textarea,input,select{border-color:#2d3a45;background:#090e13}.field textarea{line-height:1.55}.field-grid .field{margin-bottom:12px}#experiment-code{font-size:.72rem;line-height:1.65}.primary-button{font-size:.86rem;background:linear-gradient(135deg,#4bdaa1,#29bb82);box-shadow:none}.primary-button:hover{background:linear-gradient(135deg,#58e3ae,#35ca8e)}
.canvas-toolbar{background:#0d1319;border-color:var(--line-soft)}.run-control label,.compare-control label{font-size:.62rem}.run-control select,.compare-control select{font-size:.72rem}.fit-button{font-size:.67rem}.icon-button{background:#141c24;border-color:#2c3944}
.canvas-viewport{background-color:#0a0f14;background-image:linear-gradient(#22303a99 1px,transparent 1px),linear-gradient(90deg,#22303a99 1px,transparent 1px),linear-gradient(#141e2699 1px,transparent 1px),linear-gradient(90deg,#141e2699 1px,transparent 1px)}
.flow-legend{position:absolute;z-index:4;top:14px;left:14px;display:flex;gap:6px;padding:7px 9px;border:1px solid var(--line-soft);border-radius:9px;background:#090e13dd;backdrop-filter:blur(10px);pointer-events:none}.flow-legend span{display:flex;align-items:center;gap:5px;padding:0 5px;color:var(--dim);font:600 .61rem var(--mono);text-transform:uppercase}.flow-legend i{width:7px;height:7px;border-radius:50%;background:var(--green)}.flow-legend i.context{background:var(--blue)}.flow-legend i.model{background:#b69aec}.flow-legend i.tool{background:var(--amber)}.flow-legend i.result{background:var(--coral)}
.flow-node{width:270px;height:140px;min-height:140px;padding:15px 16px;border-color:#34434f;border-radius:10px;background:#121a21;box-shadow:none;overflow:hidden}.flow-node:hover{border-color:#60717e;box-shadow:0 0 0 1px #60717e33;transform:translateY(-1px)}.flow-node.selected{border-color:var(--node-color,var(--green));box-shadow:0 0 0 2px color-mix(in srgb,var(--node-color,var(--green)) 25%,transparent)}.flow-node.input{background:linear-gradient(135deg,#45d39b10,#121a21 58%)}.flow-node.context{background:linear-gradient(135deg,#79a7e812,#121a21 58%)}.flow-node.model{background:linear-gradient(135deg,#b69aec12,#121a21 58%)}.flow-node.tool{background:linear-gradient(135deg,#e7bd6512,#121a21 58%)}.flow-node.result{background:linear-gradient(135deg,#ef8b7212,#121a21 58%)}.flow-node.error{background:linear-gradient(135deg,#f16f7815,#121a21 58%)}
.flow-node::before{top:27px;border-color:#0a0f14}.node-kind{display:flex;align-items:center;gap:7px;font-size:.61rem}.node-kind b{display:grid;place-items:center;width:22px;height:18px;border:1px solid color-mix(in srgb,var(--node-color,var(--green)) 45%,transparent);border-radius:4px;color:var(--text);font-size:.58rem;letter-spacing:0}.node-time{font-size:.61rem}.flow-node h3{margin:11px 0 6px;font-size:1rem}.flow-node p{height:auto;min-height:35px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--muted);font-size:.73rem;line-height:1.48}.node-foot{font-size:.59rem}.lane-label{color:#53626e;font-size:.63rem}.edge{stroke:#45535e;stroke-width:1.7;shape-rendering:geometricPrecision}.edge.active{stroke:var(--green);stroke-width:2}.edge.flowing{stroke-dasharray:7 5;animation:edge-flow .7s linear infinite}@keyframes edge-flow{to{stroke-dashoffset:-12}}
.canvas-hint{font-size:.61rem;background:#090e13dd}.metrics-strip{background:#0d1319}.metrics-strip span{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em}.metrics-strip strong{font-size:.87rem}.comparison{font-size:.72rem}
.detail-drawer{background:#10171ef5;box-shadow:-14px 0 40px #0008}.drawer-head h2{font-size:1.3rem}.detail-desc{font-size:.8rem}.fact span{font-size:.62rem}.fact strong{font-size:.72rem}.payload-head{font-size:.68rem}#event-json{font-size:.72rem}
.page-head h1{font-size:2.15rem}.page-head p{font-size:.72rem}.stat strong{font-size:1.35rem}.stat span{font-size:.62rem}.pkg{border-radius:10px;background:#111821;box-shadow:none;border-top-width:2px}.pkg:nth-child(5n+1){border-top-color:var(--blue)}.pkg:nth-child(5n+2){border-top-color:var(--amber)}.pkg:nth-child(5n+3){border-top-color:var(--green)}.pkg:nth-child(5n+4){border-top-color:#b69aec}.pkg:nth-child(5n){border-top-color:var(--coral)}.pkg h3{font-size:.82rem}.pkg p{font-size:.72rem}.pkg footer,.deps{font-size:.62rem}.source-head strong{font-size:.72rem}#source-code{font-size:.76rem}
@media(max-width:1100px){.font-control{right:154px}.font-control-label{display:none}.font-control input[type=range]{width:52px}}
@media(max-width:760px){.font-control{right:14px}.font-control input[type=range]{width:60px}.flow-legend{max-width:calc(100% - 28px);overflow:hidden}.flow-legend span{padding:0 2px}}