:root { --ink:#10100e; --paper:#eeeadd; --acid:#d8ff3e; --rust:#c84f2f; --line:rgba(16,16,14,.2); --muted:#6e6c63; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
body { margin:0; min-height:100vh; background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 44%),var(--paper); }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
header,footer { display:flex; align-items:center; justify-content:space-between; padding:18px 3.2vw; border-bottom:1px solid var(--ink); font:700 11px/1.2 ui-monospace,SFMono-Regular,monospace; letter-spacing:.12em; }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; }.mark { display:grid; place-items:center; width:25px; height:25px; color:var(--paper); background:var(--ink); font-family:Georgia,serif; font-size:16px; }
.status { display:flex; align-items:center; gap:8px; }.status-dot { width:8px; height:8px; border-radius:50%; background:#a3a098; transition:.3s; }.ready .status-dot { background:#62bd48; box-shadow:0 0 0 4px rgba(98,189,72,.12); }.status-dot.bad{background:var(--rust)}
main { width:min(1400px,94vw); margin:0 auto; padding:70px 0 80px; }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px; margin-bottom:62px; }.eyebrow { grid-column:1/-1; margin:0 0 -10px; font:700 11px ui-monospace,monospace; letter-spacing:.18em; }.hero h1 { margin:0; font:800 clamp(54px,7.4vw,112px)/.82 Arial,sans-serif; letter-spacing:-.075em; text-transform:uppercase; }.hero h1 em { color:var(--rust); font-family:Georgia,serif; font-weight:400; text-transform:none; letter-spacing:-.055em; }.lede { max-width:540px; margin:0 0 6px; font:400 clamp(18px,2vw,28px)/1.25 Georgia,serif; }
.workspace { display:grid; grid-template-columns:320px minmax(0,1fr); border:1px solid var(--ink); background:rgba(255,255,255,.18); box-shadow:10px 10px 0 var(--ink); }
aside { border-right:1px solid var(--ink); min-height:650px; }.aside-head,.console-top,.result-head { display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:0 18px; border-bottom:1px solid var(--ink); font:700 10px ui-monospace,monospace; letter-spacing:.14em; }
.agents { max-height:680px; overflow:auto; }.agent { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; display:grid; grid-template-columns:30px 1fr; gap:7px; text-align:left; padding:15px 12px; cursor:pointer; transition:.15s; }.agent:hover { background:rgba(255,255,255,.42); }.agent.active { background:var(--acid); }.agent-index { font:10px ui-monospace,monospace; color:var(--muted); }.agent strong { display:block; font-size:13px; margin-bottom:5px; }.agent small { display:block; color:var(--muted); font:11px/1.35 Georgia,serif; }
.console { min-width:0; }.console-top { border-bottom:0; padding-top:3px; }.console-top>div,.result-head>div { display:flex; align-items:center; gap:12px; }.step { color:var(--rust); font:700 10px ui-monospace,monospace; }.text-button { border:0; border-bottom:1px solid currentColor; padding:2px 0; background:transparent; color:inherit; font:700 10px ui-monospace,monospace; text-transform:uppercase; cursor:pointer; }
#goal { width:calc(100% - 36px); margin:0 18px 12px; padding:17px; resize:vertical; border:1px solid var(--ink); background:rgba(255,255,255,.5); color:inherit; font:20px/1.4 Georgia,serif; outline:none; }.input-head { border-top:1px solid var(--ink); }.hint { color:var(--muted); font-weight:400; letter-spacing:.04em; }
.editor-wrap { display:grid; grid-template-columns:42px 1fr; margin:0 18px 18px; border:1px solid var(--ink); background:#171715; color:#f1eee2; }.line-no { padding:17px 12px; color:#77776d; border-right:1px solid #3f3f39; font:12px ui-monospace,monospace; text-align:right; }#input { width:100%; resize:vertical; border:0; outline:0; padding:17px; background:transparent; color:inherit; font:12px/1.65 ui-monospace,SFMono-Regular,monospace; tab-size:2; }
.run-row { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px; border-top:1px solid var(--ink); }.privacy { color:var(--muted); font:10px/1.4 ui-monospace,monospace; text-transform:uppercase; }.privacy span { color:var(--rust); }.run { display:flex; justify-content:space-between; align-items:center; min-width:220px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:16px 18px; font-weight:800; cursor:pointer; box-shadow:4px 4px 0 var(--rust); }.run:hover { background:var(--rust); }.run:disabled { opacity:.55; cursor:wait; }.arrow{font-size:18px}
.result-panel { margin-top:46px; border:1px solid var(--ink); background:#171715; color:#eeece2; box-shadow:10px 10px 0 var(--rust); }.result-head { border-color:#5c5b55; }.run-meta { color:#aaa89e; }.selection { display:flex; align-items:baseline; gap:18px; padding:20px; border-bottom:1px solid #5c5b55; }.selection strong { color:var(--acid); font-size:20px; }.selection span { color:#aaa89e; font:14px Georgia,serif; }pre { margin:0; padding:24px; overflow:auto; max-height:680px; font:12px/1.65 ui-monospace,monospace; }
footer { border-top:1px solid var(--ink); border-bottom:0; color:var(--muted); }
@media(max-width:850px){ main{padding-top:44px}.hero{grid-template-columns:1fr}.hero h1{font-size:17vw}.workspace{grid-template-columns:1fr;box-shadow:6px 6px 0 var(--ink)}aside{border-right:0;border-bottom:1px solid var(--ink);min-height:0}.agents{display:flex;overflow:auto}.agent{min-width:210px;border-right:1px solid var(--line)}.run-row{align-items:stretch;flex-direction:column}.run{width:100%}.selection{align-items:flex-start;flex-direction:column;gap:7px}}