/* Agent Attack Audit demo. A message arrives, its hidden instruction surfaces, the
   agent follows it with a scope that is too wide, the audit narrows it and the
   same message runs again. Drawn on the page: type, hairlines, one accent. */
.at code,.at pre {font-family:'Martian Mono',ui-monospace,monospace;font-size:.75rem;line-height:1.7;font-variant-ligatures:none}
.at pre {margin:0;white-space:normal}
.at button:focus-visible {outline:1px solid var(--oxide);outline-offset:4px}

.at-pick {display:flex;flex-wrap:wrap;gap:.4rem 1.8rem}
.at-pick button {padding:.3rem 0;font:400 clamp(1.25rem,1.9vw,1.75rem)/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.015em;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .25s,text-decoration-color .25s}
.at-pick button:hover {color:var(--ink);text-decoration-color:var(--rule)}
.at-pick button[aria-pressed="true"] {color:var(--ink);text-decoration-color:var(--oxide)}

/* Stage: the message on the left, the agent's two runs to its right. */
.at-stage {position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(2.2rem,4.5vw,5rem);margin-top:clamp(2.2rem,4vw,3.4rem);padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--rule)}
.at-stage > section {position:relative;min-width:0;z-index:1}

.at-msg {padding-right:.4rem}
.at-src,.at-run-h {font:400 1.25rem/1.25 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.015em;color:var(--ink)}
.at-to {margin-top:.2rem;font-size:.8125rem;color:var(--ink-2)}
.at-from {margin-top:1.5rem;padding-top:.9rem;border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink-2)}
.at-subj {margin-top:.15rem;font-weight:500;font-size:.9375rem;color:var(--ink)}
.at-body {margin-top:1rem;display:grid;gap:.9rem}
.at-line {font:400 1.05rem/1.55 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink)}
.at-hide {position:relative;padding-left:.9rem;border-left:1px dashed transparent;font:400 1.05rem/1.55 'Fraunces','Fraunces Fallback',Georgia,serif;transition:border-color .5s}
.at-how {display:block;font-size:.6875rem!important;color:var(--oxide);opacity:0;transition:opacity .5s,color .5s}
.at-hidden {display:block;color:var(--oxide);opacity:0;filter:blur(6px);transition:opacity .9s var(--ease),filter .9s var(--ease),color .6s}
.at-hide.is-on {border-left-color:var(--oxide)}
.at-hide.is-on .at-how {opacity:1}
.at-hide.is-on .at-hidden {opacity:1;filter:none}
.at-hide.is-data {border-left-color:var(--rule)}
.at-hide.is-data .at-how {color:var(--ink-2)}
.at-hide.is-data .at-hidden {color:var(--ink-2)}
.at-scan {position:absolute;left:0;right:0;top:0;height:1px;background:var(--oxide);opacity:0;pointer-events:none}
.at-scan.is-on {opacity:.85}

/* The two runs. Each step: a marker, then text or a call. */
.at-trace {list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--rule)}
.at-trace li {position:relative;display:grid;gap:.1rem;padding:.75rem 0 .75rem 1.5rem;border-bottom:1px solid var(--rule);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.at-trace li::before {position:absolute;left:0;top:.72rem;width:1rem;font-size:.8125rem;line-height:1.5;color:var(--ink-2)}
.at-trace li[data-k="read"]::before {content:'↓'}
.at-trace li[data-k="think"]::before {content:'·';font-size:1.3rem;line-height:1.05}
.at-trace li[data-k="call"]::before {content:'→'}
.at-trace li[data-k="res"]::before {content:'←'}
.at-trace li[data-k="reply"]::before {content:'↩'}
.at-trace code {color:var(--ink);overflow-wrap:anywhere}
.at-trace li[data-k="read"] code {color:var(--ink-2)}
.at-trace p {font:400 1rem/1.5 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink)}
.at-trace li[data-k="reply"] p {color:var(--ink-2)}
.at-scope-line {font-size:.6875rem!important;color:var(--ink-2)!important}
.at-trace li.is-leak code,.at-trace li.is-leak::before {color:var(--oxide)}
.at-trace li.is-leak .at-scope-line {color:var(--oxide)!important;opacity:.8}
.at-trace mark {color:inherit;background:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--oxide);transition:color .4s,text-decoration-color .4s}
.at-trace mark.is-pending {text-decoration-color:transparent}
.at-trace mark:not(.is-pending) {color:var(--oxide)}
.at-w {opacity:0;filter:blur(5px);transition:opacity .5s var(--ease),filter .5s var(--ease)}
.at-w.is-on {opacity:1;filter:none}
.at-run[data-run="after"] .at-run-h {color:var(--ink)}
.at-run.is-dim .at-trace {opacity:.42;transition:opacity .6s}

.at-wire {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.at-wire path {fill:none;stroke:var(--oxide);stroke-width:1;opacity:.7;transition:stroke-dashoffset 1s var(--ease),opacity .5s}
.at-wire circle {fill:var(--oxide)}
.at-wire.is-faint path,.at-wire.is-faint circle {opacity:.22}

/* Report: what was found, and what changed. */
.at-report {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(3rem,7vw,7rem);margin-top:clamp(2.4rem,4vw,3.4rem);padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--rule)}
.at-report section {min-width:0}
.at-title,.at-fix-title {font:400 clamp(1.4rem,2vw,1.9rem)/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.022em;color:var(--ink);max-width:26ch;min-height:2.4em}
.at-meta {display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1.1rem;margin-top:.85rem;font-size:.8125rem;color:var(--ink-2)}
.at-meta code {color:var(--ink-2)}
.at-sev {font-weight:500;color:var(--oxide)}
.at-text {margin-top:1.2rem;font:400 clamp(1.02rem,1.25vw,1.15rem)/1.6 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);max-width:42ch;min-height:6.4em}

.at-scope {display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin-top:1.4rem}
.at-br {flex-basis:100%;height:0}
.at-scope code {position:relative;color:var(--ink);transition:opacity .45s var(--ease),transform .5s var(--ease),color .4s}
.at-scope code::after {content:'';position:absolute;left:-.1rem;right:-.1rem;top:52%;height:1px;background:var(--oxide);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.at-scope code.is-cut {color:var(--ink-2);opacity:.6}
.at-scope code.is-cut::after {transform:scaleX(1)}
.at-scope code.is-new {color:var(--ink)}
.at-scope code.is-new::before {content:'+';margin-right:.45em;color:var(--oxide)}
.at .at-rule {margin-top:1rem}
.at-rule span {display:block;padding-left:1rem;border-left:1px solid var(--rule);color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;transition:opacity .45s var(--ease),transform .5s var(--ease)}
.at-verify {margin-top:1.4rem;display:grid;gap:.15rem}
.at-verify p {display:flex;flex-wrap:wrap;gap:.1rem 1rem;font-size:.875rem;color:var(--ink-2);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.at-verify p {flex-wrap:nowrap}
.at-verify b {flex:none;width:3.6rem;font-weight:500;color:var(--ink)}
.at-verify span {min-width:0}

/* Running: parts start hidden and arrive with .is-on. Before the script, everything shows. */
.at-meta {transition:opacity .45s var(--ease),transform .55s var(--ease)}
.at[data-state] :is(.at-trace li,.at-meta,.at-scope code,.at-rule span,.at-verify p):not(.is-on) {opacity:0;transform:translateY(5px)}
.at[data-state] .at-scope code.is-new:not(.is-on) {transform:translateX(-8px)}

@media(max-width:1100px){
 .at-stage {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .at-msg {grid-column:1/-1;max-width:40rem}
 .at-wire {display:none}
}
@media(max-width:760px){
 .at-stage {grid-template-columns:1fr;gap:2.4rem}
 .at-report {grid-template-columns:1fr;gap:2.4rem}
 .at-title,.at-fix-title,.at-text {min-height:0}
 .at-pick button {font-size:1.15rem}
 .at code,.at pre {font-size:.6875rem}
}