@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

:root { color-scheme:dark; --ink:#111111; --paper:#f0f0ed; --muted:rgba(240,240,237,.54); --rule:rgba(240,240,237,.2); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--ink); }
body { min-height:100%; margin:0; background:var(--ink); color:var(--paper); font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; }
.agent-shell { width:min(calc(100% - 160px),1120px); margin:0 auto; padding:50px 0 88px; container-type:inline-size; }
.agent-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.agent-control { position:relative; width:100%; min-height:64px; display:flex; align-items:center; justify-content:center; gap:14px; padding:18px 24px; border:1px solid var(--rule); border-radius:0; background:transparent; color:var(--paper); font:500 13px/1 "IBM Plex Mono","SFMono-Regular",Consolas,monospace; letter-spacing:.16em; text-decoration:none; text-transform:uppercase; cursor:pointer; transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease; }
.agent-control:hover { background:rgba(240,240,237,.04); border-color:rgba(240,240,237,.38); }
.agent-control:focus-visible { outline:2px solid var(--paper); outline-offset:4px; }
.copy-button.is-copied { color:#ffc800; border-color:rgba(255,200,0,.5); }
.back-icon { position:relative; width:15px; height:15px; display:inline-block; }
.back-icon::before { content:""; position:absolute; top:50%; left:1px; width:11px; height:11px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-50%) rotate(45deg); }
.back-icon::after { content:""; position:absolute; top:50%; left:2px; width:13px; height:1.5px; background:currentColor; transform:translateY(-50%); }
.copy-icon { position:relative; width:15px; height:15px; display:inline-block; }
.copy-icon::before,.copy-icon::after { content:""; position:absolute; width:9px; height:9px; border:1.5px solid currentColor; border-radius:2px; }
.copy-icon::before { top:1px; left:1px; }
.copy-icon::after { right:1px; bottom:1px; background:var(--ink); }
.ascii-portrait { width:calc((100% - 12px)/2); margin:48px 0 72px; overflow:visible; color:var(--muted); font:400 clamp(5px,1.86cqi,21px)/1.1 "IBM Plex Mono","SFMono-Regular",Consolas,monospace; letter-spacing:0; white-space:pre; user-select:none; }
.agent-content { margin:0; color:var(--paper); font:400 clamp(13px,1.18vw,16px)/1.72 "IBM Plex Mono","SFMono-Regular",Consolas,monospace; letter-spacing:.005em; text-align:justify; text-justify:inter-word; white-space:pre-wrap; overflow-wrap:anywhere; tab-size:2; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:780px) { .agent-shell{width:calc(100% - 96px)} }
@media (max-width:600px) { .agent-shell{width:calc(100% - 80px);padding:20px 0 56px}.agent-actions{grid-template-columns:1fr;gap:10px}.agent-control{min-height:58px;font-size:11px}.ascii-portrait{width:100%;margin:36px 0 52px;font-size:clamp(7px,3.76cqi,20px)}.agent-content{font-size:12px;line-height:1.68} }
@media (prefers-reduced-motion:reduce) { .agent-control{transition:none} }