/* Interactive use-case simulators. Browser-only illustrations of the
   walkthroughs; nothing is evaluated or called. One dark console panel in the
   DeepAgentLabs teal + lime palette, identical in light and dark page themes. */
.md-typeset figure.ae-sim {
  --ae-bg: #0d181b;
  --ae-panel: #13242a;
  --ae-panel-2: #182e35;
  --ae-line: #26414a;
  --ae-line-2: #335660;
  --ae-text: #e8f1ee;
  --ae-muted: #9fb5b0;
  --ae-dim: #6f8984;
  --ae-lime: #b7f343;
  --ae-lime-ink: #10200a;
  --ae-ok: #7be3a4;
  --ae-warn: #ffc56b;
  --ae-bad: #ff8a8a;
  --ae-info: #79d8ff;
  --ae-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 1.6em 0;
  padding: 0;
  border: 1px solid var(--ae-line);
  border-radius: 14px;
  background: radial-gradient(120% 80% at 0% 0%, #17303a 0%, var(--ae-bg) 60%);
  color: var(--ae-text);
  text-align: left;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  container-type: inline-size;
}
.md-typeset .ae-sim * { box-sizing: border-box; }
.md-typeset .ae-sim p, .md-typeset .ae-sim h3, .md-typeset .ae-sim h4,
.md-typeset .ae-sim ul, .md-typeset .ae-sim ol, .md-typeset .ae-sim li { margin: 0; padding: 0; }
.md-typeset .ae-sim ul, .md-typeset .ae-sim ol { list-style: none; }
.md-typeset .ae-sim code {
  font: 12px/1.6 var(--ae-mono);
  background: none;
  color: inherit;
  padding: 0;
  border: 0;
  box-shadow: none;
  word-break: break-word;
}

/* Header */
.ae-sim-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 0; }
.ae-sim-eyebrow { display: block; font: 600 11px/1.4 var(--ae-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ae-lime); }
.md-typeset .ae-sim h3.ae-sim-title { margin-top: 8px; font-size: 21px; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; color: var(--ae-text); }
.ae-sim-badge { flex-shrink: 0; font: 11px/1 var(--ae-mono); color: var(--ae-muted); border: 1px solid var(--ae-line-2); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.ae-sim-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ae-lime); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 3px #b7f34326; }

/* Step rail */
.ae-sim-rail { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 22px 0; }
.ae-sim-rail::-webkit-scrollbar { display: none; }
.md-typeset .ae-sim-rail button {
  flex: 0 1 auto; display: flex; align-items: center; gap: 7px;
  font: 12px/1 var(--ae-mono); color: var(--ae-muted);
  background: var(--ae-panel); border: 1px solid var(--ae-line); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.ae-sim-rail button .ae-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ae-line-2); font-size: 10px; }
.ae-sim-rail button:hover { border-color: var(--ae-line-2); color: var(--ae-text); }
.ae-sim-rail button.done { color: var(--ae-text); }
.ae-sim-rail button.done .ae-n { background: #b7f3431f; border-color: #b7f34366; color: var(--ae-lime); }
.ae-sim-rail button[aria-current="step"] { background: var(--ae-lime); border-color: var(--ae-lime); color: var(--ae-lime-ink); font-weight: 600; }
.ae-sim-rail button[aria-current="step"] .ae-n { border-color: #10200a55; color: var(--ae-lime-ink); background: none; }
.ae-sim-progress { height: 2px; margin: 12px 22px 0; background: var(--ae-line); border-radius: 2px; overflow: hidden; }
.ae-sim-progress span { display: block; height: 100%; width: 0; background: var(--ae-lime); }
.ae-sim.ae-running .ae-sim-progress span { animation: ae-fill var(--ae-dwell, 3s) linear forwards; }

/* Stage */
.ae-sim-stage { padding: 18px 22px; }

/* Narration */
.ae-sim-say { margin: 0 22px; padding: 16px 18px; border: 1px solid var(--ae-line); border-radius: 10px; background: var(--ae-panel); min-height: 148px; }
.ae-sim-say .ae-say-step { font: 11px/1.4 var(--ae-mono); color: var(--ae-lime); letter-spacing: .06em; text-transform: uppercase; }
.md-typeset .ae-sim .ae-say-title { margin-top: 6px; font-size: 18px; line-height: 1.3; font-weight: 650; color: var(--ae-text); letter-spacing: -.01em; }
.md-typeset .ae-sim .ae-say-text { margin-top: 6px; font-size: 14px; color: var(--ae-muted); }
.ae-say-code { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 8px 10px; border-radius: 7px; background: #0a1417; border: 1px solid var(--ae-line); color: #d6f7a0; }
.ae-say-code::before { content: "›"; color: var(--ae-lime); font: 600 13px/1.5 var(--ae-mono); }
.ae-say-code code { color: #d6f7a0 !important; }
.ae-say-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ae-say-choices[hidden] { display: none; }
.ae-say-choices span { width: 100%; font: 11px/1.4 var(--ae-mono); color: var(--ae-muted); text-transform: uppercase; letter-spacing: .06em; }

/* Controls */
.ae-sim-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 14px 22px 0; }
.ae-sim-controls > div { display: flex; gap: 8px; flex-wrap: wrap; }
.md-typeset .ae-sim button.ae-btn {
  font: 600 13px/1 var(--md-text-font-family, system-ui), system-ui, sans-serif;
  color: var(--ae-text); background: var(--ae-panel-2); border: 1px solid var(--ae-line-2);
  border-radius: 8px; padding: 9px 13px; cursor: pointer; transition: background .2s, border-color .2s, transform .1s;
}
.md-typeset .ae-sim button.ae-btn:hover { border-color: var(--ae-lime); }
.md-typeset .ae-sim button.ae-btn:active { transform: translateY(1px); }
.md-typeset .ae-sim button.ae-btn:disabled { opacity: .4; cursor: default; border-color: var(--ae-line-2); }
.md-typeset .ae-sim button.ae-btn.ae-primary { background: var(--ae-lime); border-color: var(--ae-lime); color: var(--ae-lime-ink); }
.md-typeset .ae-sim button.ae-btn.ae-danger { border-color: #ff8a8a77; }
.md-typeset .ae-sim button:focus-visible { outline: 2px solid var(--ae-lime); outline-offset: 2px; }
.ae-sim-hint { font: 11px/1.4 var(--ae-mono); color: var(--ae-dim); }

/* Metrics */
.ae-sim-metrics { display: grid; grid-template-columns: repeat(var(--ae-cols, 3), minmax(0, 1fr)); gap: 1px; margin: 16px 22px 0; border: 1px solid var(--ae-line); border-radius: 10px; overflow: hidden; background: var(--ae-line); }
.ae-sim-metrics > div { background: var(--ae-panel); padding: 12px 14px; }
.ae-sim-metrics b { display: block; font-size: 24px; line-height: 1.15; font-weight: 650; letter-spacing: -.02em; color: var(--ae-text); transition: color .3s; }
.ae-sim-metrics span { display: block; margin-top: 4px; font: 11px/1.35 var(--ae-mono); color: var(--ae-muted); }
.ae-sim-metrics .ae-bump b { animation: ae-bump .5s ease; color: var(--ae-lime); }

.md-typeset .ae-sim figcaption { display: block; max-width: none; margin: 18px 0 0; padding: 14px 22px 18px; border-top: 1px solid var(--ae-line); font-size: 12px; line-height: 1.6; color: var(--ae-muted); text-align: left; }
.ae-sim noscript { display: block; padding: 16px 22px; color: var(--ae-muted); }

/* Shared stage atoms */
.ae-lane { border: 1px dashed var(--ae-line-2); border-radius: 10px; padding: 12px; }
.ae-lane + .ae-lane { margin-top: 10px; }
.ae-lane-label { display: flex; justify-content: space-between; font: 11px/1.4 var(--ae-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ae-muted); margin-bottom: 10px; }
.ae-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ae-tile {
  position: relative; padding: 10px 11px; border-radius: 9px; background: var(--ae-panel); border: 1px solid var(--ae-line);
  transition: opacity .35s, transform .35s, border-color .3s, box-shadow .3s, background .3s;
}
.ae-tile .ae-name { font: 600 13px/1.3 var(--ae-mono); color: var(--ae-text); }
.ae-tile .ae-sub { font: 11px/1.5 var(--ae-mono); color: var(--ae-dim); margin-top: 2px; }
.ae-tile .ae-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-height: 20px; }
.ae-pill { display: inline-flex; align-items: center; gap: 5px; font: 11px/1 var(--ae-mono); padding: 4px 7px; border-radius: 999px; border: 1px solid var(--ae-line-2); color: var(--ae-muted); white-space: nowrap; }
.ae-pill.ok { color: var(--ae-ok); border-color: #7be3a455; background: #7be3a412; }
.ae-pill.warn { color: var(--ae-warn); border-color: #ffc56b55; background: #ffc56b12; }
.ae-pill.bad { color: var(--ae-bad); border-color: #ff8a8a55; background: #ff8a8a12; }
.ae-pill.lime { color: var(--ae-lime); border-color: #b7f34366; background: #b7f34314; }
.ae-pill.info { color: var(--ae-info); border-color: #79d8ff55; background: #79d8ff12; }
.ae-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.ae-tile.is-hit { border-color: var(--ae-lime); box-shadow: 0 0 0 3px #b7f34322, 0 8px 22px #0006; }
.ae-tile.is-hit.bad { border-color: var(--ae-bad); box-shadow: 0 0 0 3px #ff8a8a22, 0 8px 22px #0006; }
.ae-tile.is-hit.warn { border-color: var(--ae-warn); box-shadow: 0 0 0 3px #ffc56b22, 0 8px 22px #0006; }
.ae-tile.is-dim { opacity: .38; }
.ae-tile.is-new { animation: ae-in .5s ease both; }
.ae-tile.is-ghost { border-style: dashed; background: transparent; }
.ae-tile.is-flash { animation: ae-flash .9s ease; }
.ae-tile.is-hidden { display: none; }
.ae-card { padding: 12px 13px; border-radius: 10px; background: var(--ae-panel); border: 1px solid var(--ae-line); transition: border-color .3s, box-shadow .3s, opacity .3s; }
.ae-card-label { font: 11px/1.4 var(--ae-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ae-muted); }
.ae-card-value { margin-top: 6px; font-size: 16px; font-weight: 650; color: var(--ae-text); }
.ae-card.is-hit { border-color: var(--ae-lime); box-shadow: 0 0 0 3px #b7f34322; }
.ae-card.is-bad { border-color: var(--ae-bad); box-shadow: 0 0 0 3px #ff8a8a22; }
.ae-card.is-shake { animation: ae-shake .45s ease; }
.ae-log { margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: #081013; border: 1px solid var(--ae-line); font: 12px/1.7 var(--ae-mono); color: var(--ae-muted); min-height: 52px; }
.ae-log-title { font: 11px/1.4 var(--ae-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ae-dim); margin-bottom: 4px; }
.ae-log li { white-space: pre-wrap; word-break: break-word; }
.ae-log li.is-new { animation: ae-type .45s ease both; color: var(--ae-text); }
.ae-log li .k { color: var(--ae-lime); }
.ae-log li .r { color: var(--ae-bad); }
.ae-toast { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font: 12px/1.5 var(--ae-mono); border: 1px solid; animation: ae-in .35s ease both; }
.ae-toast.bad { color: var(--ae-bad); border-color: #ff8a8a66; background: #ff8a8a12; }
.ae-toast.ok { color: var(--ae-lime); border-color: #b7f34366; background: #b7f34312; }
.ae-toast[hidden] { display: none; }
.ae-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--ae-line); }
.ae-bar i { display: block; height: 100%; width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1); }

.ae-toast.warn { color: var(--ae-warn); border-color: #ffc56b66; background: #ffc56b12; }
.ae-card.is-warn { border-color: var(--ae-warn); box-shadow: 0 0 0 3px #ffc56b22; }
.ae-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font: 12px/1.5 var(--ae-mono); color: var(--ae-muted); }
.ae-row b { color: var(--ae-text); font-weight: 600; text-align: right; }
.ae-row b.ok { color: var(--ae-lime); }
.ae-row b.warn { color: var(--ae-warn); }
.ae-row b.bad { color: var(--ae-bad); }

/* Material indents list items with [dir=ltr] .md-typeset ol li; same specificity, later wins. */
.md-typeset .ae-sim ol > li, .md-typeset .ae-sim ul > li { margin: 0; }

/* Release gate */
.ae-gate-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; align-items: start; }
.ae-lane { transition: opacity .35s; }
.ae-lane.is-dim { opacity: .38; }
.md-typeset .ae-sim ol.ae-cases { display: grid; gap: 4px; }
.md-typeset .ae-sim li.ae-case { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; gap: 6px; align-items: center; padding: 6px 8px; }
.ae-case { border-radius: 7px; background: var(--ae-panel); border: 1px solid var(--ae-line); transition: border-color .3s, box-shadow .3s; }
.ae-case .ae-pill:last-of-type { justify-content: center; }
.ae-case-id { font: 600 12px/1.3 var(--ae-mono); color: var(--ae-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-case-detail { grid-column: 1 / -1; font: 11px/1.4 var(--ae-mono); color: var(--ae-bad); }
.ae-case-detail:empty { display: none; }
.ae-case.is-bad { border-color: var(--ae-bad); box-shadow: 0 0 0 3px #ff8a8a1f; }
.ae-case.is-focus { border-style: dashed; border-color: var(--ae-line-2); }
.ae-case.is-bad.is-focus { border-style: solid; border-color: var(--ae-bad); }
.ae-case.is-new { animation: ae-in .4s ease both; }

/* Trajectory */
.ae-reply { margin-bottom: 10px; }
.ae-reply .ae-card-value { font-size: 15px; }
.ae-runs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ae-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ae-chip { font: 11px/1 var(--ae-mono); padding: 5px 7px; border-radius: 6px; border: 1px solid var(--ae-line-2); color: var(--ae-muted); background: #0a1417; }
.ae-chip.ok { color: var(--ae-text); border-color: #7be3a455; }
.ae-chip.bad { color: var(--ae-bad); border-color: #ff8a8a77; background: #ff8a8a12; }
.ae-chip.missing { color: var(--ae-bad); border-style: dashed; border-color: #ff8a8a77; background: transparent; text-decoration: line-through; }
.ae-chip.is-new { animation: ae-in .4s ease both; }

/* Judge */
.ae-judged { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ae-votes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ae-vote { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; font: 600 11px/1 var(--ae-mono); border: 1px solid var(--ae-line-2); color: var(--ae-dim); }
.ae-vote.ok { color: var(--ae-ok); border-color: #7be3a466; background: #7be3a414; }
.ae-vote.warn { color: var(--ae-warn); border-color: #ffc56b66; background: #ffc56b14; }
.ae-vote.bad { color: var(--ae-bad); border-color: #ff8a8a66; background: #ff8a8a14; }
.ae-vote.retry { color: var(--ae-info); border-style: dashed; border-color: #79d8ff66; }
.ae-vote.is-new { animation: ae-in .4s ease both; }
.ae-judge-gate { margin-top: 10px; }

/* Narrow containers */
@container (max-width: 640px) {
  .ae-gate-grid { grid-template-columns: 1fr; }
  .ae-judged { grid-template-columns: 1fr; }
}
@container (max-width: 440px) {
  .ae-runs { grid-template-columns: 1fr; }
  .ae-sim-head, .ae-sim-rail, .ae-sim-stage, .ae-sim-controls { padding-left: 14px; padding-right: 14px; }
  .ae-sim-say, .ae-sim-metrics, .ae-sim-progress { margin-left: 14px; margin-right: 14px; }
  .ae-sim-head { flex-direction: column; }
  .ae-sim-metrics { grid-template-columns: 1fr 1fr; }
  .ae-sim-metrics > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ae-sim-rail button .ae-l { display: none; }
  .ae-sim-rail button[aria-current="step"] .ae-l { display: inline; }
}

@keyframes ae-fill { from { width: 0; } to { width: 100%; } }
@keyframes ae-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ae-type { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes ae-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes ae-flash { 0% { box-shadow: 0 0 0 0 #b7f34399; } 100% { box-shadow: 0 0 0 14px #b7f34300; } }
@keyframes ae-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .ae-sim *, .ae-sim *::before { animation: none !important; transition: none !important; }
}