:root { --bg:#080b13; --panel:#101521; --line:#242b3a; --muted:#8a93a6; --text:#f1f4fa; --violet:#8067ff; --cyan:#42d6c5; --green:#45d483; --red:#ff6075; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; overflow-x:hidden; }
.glow { position:fixed; width:520px; height:520px; border-radius:50%; filter:blur(130px); opacity:.11; pointer-events:none; }
.glow-one { background:var(--violet); top:-270px; left:15%; }.glow-two { background:var(--cyan); right:-330px; top:30%; }
header { height:72px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #171c27; backdrop-filter:blur(14px); position:relative; z-index:2; }
.brand { color:var(--text); text-decoration:none; display:flex; gap:11px; align-items:center; font-weight:750; font-size:20px; letter-spacing:-.5px; }.brand>span:last-child span{color:#9b8aff}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--violet),#5b45d8);font-size:16px;box-shadow:0 0 25px #8067ff45}
.health { color:var(--muted); font-size:13px; display:flex; gap:9px; align-items:center; }.health i{width:8px;height:8px;border-radius:50%;background:#e7ab45;box-shadow:0 0 10px currentColor}.health.ok i{background:var(--green)}.health.error i{background:var(--red)}
main { max-width:1180px; margin:auto; padding:68px 24px 80px; position:relative; }
.hero { text-align:center; max-width:780px; margin:0 auto 44px; }.eyebrow,.section-title>div>span{font-size:11px;letter-spacing:2.2px;color:#9b8aff;font-weight:750}.hero h1{font-size:clamp(40px,6vw,68px);line-height:1.04;letter-spacing:-3px;margin:15px 0 22px}.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#a99aff,#58dccc);background-clip:text}.hero p{color:var(--muted);font-size:17px;line-height:1.7;margin:auto;max-width:630px}
.panel { border:1px solid var(--line); background:linear-gradient(145deg,#111724e8,#0d121ce8); border-radius:18px; box-shadow:0 22px 65px #0004; }
.composer { max-width:900px; margin:0 auto 28px; padding:22px; }.composer-head,.composer-foot{display:flex;justify-content:space-between;align-items:center}.composer-head label{font-weight:650}.composer-head span,.composer-foot>span{font-size:12px;color:#697386}textarea{width:100%;min-height:132px;resize:vertical;margin:17px 0 14px;padding:18px;background:#0a0e17;color:var(--text);border:1px solid #252c3b;border-radius:12px;font:15px/1.65 inherit;outline:none;transition:.2s}textarea:focus{border-color:#6e59dd;box-shadow:0 0 0 3px #8067ff18}textarea::placeholder{color:#555e70}button{border:0;cursor:pointer;font:650 13px inherit}#runButton{display:flex;align-items:center;gap:26px;padding:12px 15px 12px 19px;border-radius:10px;color:white;background:linear-gradient(100deg,#735bea,#5b49cf);box-shadow:0 8px 24px #6852df35}#runButton b{font-size:18px}#runButton:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.workspace,.result{padding:28px;margin-top:22px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.section-title h2{font-size:22px;margin:5px 0 0}.run-state{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:8px 13px}.run-state.running{color:#b9adff;border-color:#56499b;background:#8067ff12}.run-state.complete{color:var(--green);border-color:#276844;background:#45d4830d}.run-state.error{color:var(--red);border-color:#733340}
.pipeline{display:flex;align-items:center}.node{flex:1;min-width:0;min-height:185px;border:1px solid #252c3a;border-radius:14px;padding:15px;background:#0b101a;transition:.35s}.node-top{display:flex;justify-content:space-between;align-items:center}.node-number{font-size:10px;color:#555e70;letter-spacing:1px}.node-status{font-size:10px;color:#687184;text-transform:uppercase;letter-spacing:.5px}.node-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;margin:24px 0 14px;background:#171d2a;color:#7e889c;font-weight:800}.node h3{font-size:14px;margin:0 0 7px}.node p{font-size:11px;color:#697386;margin:0;white-space:nowrap}.connector{height:1px;background:#2b3240;flex:0 1 32px;min-width:12px;position:relative}.connector i{position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left;transition:.5s}.node.running{border-color:#7760ef;background:#111429;box-shadow:0 0 0 3px #8067ff12,0 10px 35px #5f4bce20}.node.running .node-icon{color:#d7d1ff;background:#6955d8;animation:pulse 1.5s infinite}.node.running .node-status{color:#ae9fff}.node.completed{border-color:#285f46}.node.completed .node-icon{background:#173928;color:var(--green)}.node.completed .node-status{color:var(--green)}.node.completed+.connector i{transform:scaleX(1)}.node.failed{border-color:#7b3040}.node.failed .node-icon{background:#3b1821;color:var(--red)}.node.failed .node-status{color:var(--red)}
@keyframes pulse{50%{box-shadow:0 0 0 8px #8067ff15}}
.activity{margin-top:22px;padding:13px 15px;background:#0a0f18;border-radius:10px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:11px}.activity-dot{width:7px;height:7px;border-radius:50%;background:#5b6475}.activity.live .activity-dot{background:var(--violet);animation:pulse 1.2s infinite}.activity.error{color:#ff91a0}.activity.error .activity-dot{background:var(--red)}
.result-actions{display:flex;gap:9px}.secondary{color:#aeb6c5;background:#171d29;border:1px solid #293142;padding:9px 13px;border-radius:8px}.secondary:hover{color:white;border-color:#4b566d}.markdown{background:#0a0f18;border:1px solid #1d2431;border-radius:12px;padding:28px;color:#cbd2df;line-height:1.75;font-size:14px}.markdown h1,.markdown h2,.markdown h3{color:#f3f5fa;line-height:1.3}.markdown h1{font-size:26px}.markdown h2{font-size:20px;margin-top:30px;border-bottom:1px solid #252c38;padding-bottom:8px}.markdown h3{font-size:16px;margin-top:24px}.markdown code{color:#75ddcf;background:#161e29;padding:2px 5px;border-radius:4px}.markdown pre{overflow:auto;padding:16px;background:#070a10;border-radius:8px}.markdown li{margin:6px 0}.markdown strong{color:#fff}
footer{text-align:center;color:#4e5768;font-size:12px;padding:0 20px 34px}
@media(max-width:850px){main{padding-top:48px}.pipeline{flex-direction:column;align-items:stretch}.connector{width:1px;height:18px;min-height:18px;min-width:1px;margin-left:30px;flex-basis:auto}.connector i{transform:scaleY(0);transform-origin:top}.node.completed+.connector i{transform:scaleY(1)}.node{min-height:auto}.node-icon{margin:17px 0 12px}.hero h1{letter-spacing:-2px}.composer-foot>span{display:none}}
@media(max-width:520px){header{height:64px}.health span{display:none}main{padding-left:14px;padding-right:14px}.workspace,.result{padding:18px}.section-title{align-items:flex-start}.result .section-title{gap:18px;flex-direction:column}.hero{margin-bottom:32px}.hero p{font-size:15px}}