.live-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px;align-items:start}
.agent-definition{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:18px 0 24px}
.agent-definition div{background:#fffdf7;padding:20px;min-height:150px}
.agent-definition span{font:400 11px/1 var(--mono);letter-spacing:2px;color:var(--gold)}
.agent-definition b{display:block;font:600 18px/1.35 var(--serif);margin:18px 0 8px}
.agent-definition p{margin:0;color:var(--ink-mute);font-size:13px}
.live-side,.live-desk{background:#fffdf7;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 4px 18px -14px rgba(14,18,24,.22)}
.live-side{padding:22px;position:sticky;top:78px}
.live-side h2{font-size:22px}
.live-side ol{padding-left:20px}
.live-side li{margin:8px 0}
.live-desk{padding:28px}
.agent-board{display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr;align-items:stretch;margin:0 0 24px}
.agent-board div{background:#f8f5ed;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:16px;min-height:118px}
.agent-board small{font:500 12px/1 var(--mono);color:var(--gold)}
.agent-board b{display:block;font:600 18px/1.4 var(--serif);margin:12px 0 6px}
.agent-board p{margin:0;color:var(--ink-soft);font-size:13px}
.agent-board span{position:relative}
.agent-board span:before{content:'';position:absolute;left:8px;right:8px;top:50%;height:1px;background:var(--gold)}
.agent-board span:after{content:'›';position:absolute;right:2px;top:calc(50% - 18px);font-size:30px;color:var(--gold)}
.live-desk label{display:block;font-weight:600;margin:16px 0 8px}
.live-desk textarea{display:block;width:100%;min-height:116px;font:inherit;border:1px solid var(--line);background:white;border-radius:var(--r-md);padding:14px;resize:vertical}
#constraints{min-height:84px}
.buttons{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 18px}
#run,.primary{background:var(--ink);color:white;border-color:var(--ink)}
button:disabled{opacity:.45;cursor:default}
.muted{font-size:13px;color:var(--ink-mute)}
#status{padding:13px 15px;background:var(--paper-2);border-left:3px solid var(--gold);border-radius:var(--r-md)}
#progress{background:#fbfaf6;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:16px 16px 16px 38px}
#progress li{margin:6px 0}
#evidence{display:grid;gap:12px;margin:18px 0}
#evidence>label{display:block;background:#fbfaf6;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:12px}
#evidence>label b{display:block}
#evidence>label small{display:block;color:var(--ink-mute);font-size:12px;margin-left:22px}
#evidence details{background:#fffdf7;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:12px}
#result{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.9;border-top:1px solid var(--line);padding-top:22px;margin-top:18px}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.comparison section{padding:14px;background:#f5f1e7;border:1px solid var(--line-soft);min-width:0;border-radius:var(--r-md)}
.comparison pre{overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:900px){
  .live-layout{grid-template-columns:1fr}
  .live-side{position:static}
  .comparison,.agent-definition{grid-template-columns:1fr}
  .agent-board{grid-template-columns:1fr}
  .agent-board span{height:28px}
  .agent-board span:before{left:50%;right:auto;width:1px;height:20px;top:4px}
  .agent-board span:after{left:calc(50% - 8px);right:auto;top:4px;transform:rotate(90deg)}
}