#runtime-instructions .instructions-view{--json-literal:#77511b;--json-surface:#f2f7ef;color:var(--ink);background:var(--surface)}
#runtime-instructions .instruction-note{font-size:12px;color:var(--muted);margin:8px 0}
#runtime-instructions .instruction-prose{margin-bottom:14px}
#runtime-instructions .instruction-prose>pre{font:13px/1.65 system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
#runtime-instructions .instruction-prose>summary>span{font-weight:400;font-size:11px;color:var(--muted)}
#runtime-instructions .instruction-request{border-top:1px solid var(--line);padding-top:14px;scroll-margin-top:65px}
#runtime-instructions .instruction-prose{scroll-margin-top:65px}
#runtime-instructions .instruction-json-fields{margin:0;font-size:12px;min-width:0}
#runtime-instructions .instruction-json-row{display:grid;grid-template-columns:minmax(85px,30%) minmax(0,1fr);gap:6px 12px;padding:6px 0;border-bottom:1px solid var(--divider)}
#runtime-instructions .instruction-json-row dt{font-weight:600;overflow-wrap:anywhere;color:var(--ink)}
#runtime-instructions .instruction-json-row dd{margin:0;min-width:0;overflow-wrap:anywhere}
#runtime-instructions .instruction-json-row details{border:0;padding:0}
#runtime-instructions .instruction-json-row summary{font-size:12px}
#runtime-instructions .instruction-json-value{white-space:pre-wrap;font-family:ui-monospace,monospace;user-select:text}
#runtime-instructions .instruction-json-literal{color:var(--json-literal)}
#runtime-instructions .instruction-reference{padding:3px 7px;margin-bottom:5px;background:var(--json-surface);color:var(--accent);border:1px solid var(--line);font:12px/1.5 system-ui,sans-serif;text-align:left}
#runtime-instructions .instruction-raw{margin-top:12px}
@media(max-width:540px){#runtime-instructions .instruction-json-row{grid-template-columns:minmax(0,1fr);gap:3px}#runtime-instructions .instruction-json-row dd{padding-left:10px;border-left:2px solid var(--divider)}}
:where(html[data-theme="dark"]) #runtime-instructions .instructions-view{--json-literal:#efcf8b;--json-surface:#1a2c25}
/* Dialog theme must not depend on the conversation behind it being visible. */
:where(html[data-theme="dark"]) #runtime-instructions{--page:#10251f;--surface:#182f27;--ink:#edf6ea;--muted:#b8cbbd;--line:#608a7a;--divider:#36544a;--accent:#a9dbc5;--danger:#ffb3be}

#runtime-instructions .instruction-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
#runtime-instructions .instruction-comparison section{min-width:0}
#runtime-instructions .instruction-comparison h4{font-size:12px;margin:8px 0;color:var(--ink)}
#runtime-instructions .instruction-comparison pre{font:12px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;background:var(--json-surface);color:var(--ink);padding:10px;border:1px solid var(--line)}
#runtime-instructions .instruction-bindings{overflow-x:auto;margin:10px 0}
#runtime-instructions .instruction-bindings table{width:100%;border-collapse:collapse;font-size:12px;background:var(--surface);color:var(--ink)}
#runtime-instructions .instruction-bindings caption{text-align:left;font-weight:600;margin-bottom:5px}
#runtime-instructions .instruction-bindings th,#runtime-instructions .instruction-bindings td{padding:6px;text-align:left;vertical-align:top;border:1px solid var(--line);overflow-wrap:anywhere}
#runtime-instructions .instruction-bindings th{background:var(--json-surface);color:var(--ink)}
@media(max-width:760px){#runtime-instructions .instruction-comparison{grid-template-columns:minmax(0,1fr)}}