/* Compact explanation: a connection node, an AE composition and an Agent response. */
.bridge-story { --bridge-ink:var(--aenv-foreground,#eae8ed); --bridge-bg:var(--aenv-background,#16151a); --bridge-muted:color-mix(in srgb,var(--bridge-ink) 65%,var(--bridge-bg)); --bridge-line:color-mix(in srgb,var(--bridge-ink) 15%,transparent); --bridge-accent:var(--aenv-violet-soft,#c2a2ff); --bridge-green:#80cab4; color:var(--bridge-ink); }
.bridge-story .aenv-story__heading { max-width:none; display:grid; grid-template-columns:1.2fr 1fr; column-gap:3rem; align-items:end; margin-bottom:2.25rem; }
.bridge-story .aenv-story__kicker { grid-column:1 / -1; }
.bridge-story .aenv-story__heading h2 { font-size:clamp(2rem,3.4vw,2.75rem); }
.bridge-story .aenv-story__lead { margin:0; font-size:.85rem; }
.bridge-story__stage { padding:1.5rem 2rem; border:1px solid var(--bridge-line); border-radius:1.25rem; background:color-mix(in srgb,var(--bridge-ink) 2%,var(--bridge-bg)); overflow:hidden; }
.bridge-story__stage:focus-visible { outline:2px solid var(--bridge-accent); outline-offset:.25rem; }
.bridge-story__topline { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem; color:var(--bridge-muted); font-size:.7rem; margin-bottom:1.4rem; }
.bridge-story__demo { color:var(--bridge-accent); }
.bridge-story__chapters { display:flex; justify-content:space-between; gap:1rem; list-style:none; margin:0; padding:0 0 1rem; border-bottom:1px solid var(--bridge-line); }
.bridge-story__chapters li { display:flex; gap:.55rem; align-items:baseline; color:var(--bridge-muted); }
.bridge-story__chapters li>span { font:400 .6rem/1.8 var(--font-mono,monospace); opacity:.6; }
.bridge-story__chapters strong { font-size:.72rem; font-weight:500; }
.bridge-story__chapters [aria-current="step"] { color:var(--bridge-accent); }
.bridge-story__scene { position:relative; height:23rem; isolation:isolate; }
.bridge-story__window { position:absolute; min-width:0; border:1px solid var(--bridge-line); border-radius:.85rem; background:var(--bridge-bg); transform-origin:center; }
.bridge-story.is-enhanced .bridge-story__window { will-change:transform,opacity; }
.bridge-story__window.is-focus { z-index:6; border-color:color-mix(in srgb,var(--bridge-accent) 52%,var(--bridge-line)); }
.bridge-story__manager { width:7.5rem; top:2.25rem; left:13%; z-index:3; text-align:center; background:color-mix(in srgb,var(--bridge-accent) 5%,var(--bridge-bg)); }
.bridge-story__manager .bridge-story__windowbody { display:grid; justify-items:center; gap:.5rem; padding:1rem .5rem; }
.bridge-story__manager strong { font-size:.72rem; letter-spacing:.12em; font-weight:500; }
.bridge-story__manager small { font-size:.55rem; color:var(--bridge-muted); }
.bridge-story__brand { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid color-mix(in srgb,var(--bridge-accent) 50%,var(--bridge-line)); border-radius:.6rem; font-size:1.15rem; font-weight:550; color:var(--bridge-accent); }
.bridge-story__connector { font:400 .55rem/1.5 var(--font-mono,monospace); color:var(--bridge-accent); }.bridge-story__connector i { font-style:normal; color:var(--bridge-muted); }
.bridge-story__ae { width:42%; top:2rem; right:5%; z-index:2; }
.bridge-story__agent { width:43%; left:8%; top:10rem; z-index:4; box-shadow:0 .8rem 2rem -.8rem #0007; }
.bridge-story__windowbar { display:flex; gap:.5rem; align-items:center; padding:.65rem .8rem; border-bottom:1px solid var(--bridge-line); font-size:.65rem; }
.bridge-story__windowbar strong { font-weight:500; white-space:nowrap; }
.bridge-story__windowmeta { margin-left:auto; font-size:.5rem; color:var(--bridge-muted); }
.bridge-story__ae-brand,.bridge-story__agent-brand { color:var(--bridge-accent); font-size:.75rem; font-weight:550; }
.bridge-story__windowbody { padding:.8rem; }
.bridge-story__hostline { display:flex; align-items:center; gap:.45rem; margin-left:auto; color:var(--bridge-green); font-size:.5rem; }
.bridge-story__heartbeat { height:.65rem; display:flex; gap:2px; align-items:center; }.bridge-story__heartbeat i { height:40%; width:2px; background:currentColor; transform-origin:center; }.bridge-story__heartbeat i:nth-child(2n) { height:70%; }.bridge-story__heartbeat i:nth-child(3) { height:100%; }
.bridge-story__composition { height:10rem; position:relative; display:grid; align-content:center; overflow:hidden; background:#252032; padding:1.4rem; border-radius:.35rem; color:#e6dcec; }
.bridge-story__composition>span { position:absolute; top:.5rem; left:.6rem; font-size:.5rem; color:#b1a6bd; }
.bridge-story__composition>i { position:absolute; width:8rem; height:8rem; right:-1rem; top:1rem; border:1px solid #a38ac7; border-radius:50%; }
.bridge-story__composition b { position:relative; font-size:clamp(1.35rem,2.5vw,2rem); line-height:1.08; letter-spacing:-.055em; font-weight:500; }
.bridge-story__composition small { position:absolute; right:.6rem; bottom:.5rem; font-size:.5rem; color:#b1a6bd; }
.bridge-story__selection { position:absolute; inset:2.1rem 1rem; border:1px solid #c2a2ff77; opacity:0; }
.bridge-story__selection::before,.bridge-story__selection::after { content:""; position:absolute; width:.3rem; height:.3rem; background:var(--bridge-accent); }
.bridge-story__selection::before { top:-.15rem; left:-.15rem; }.bridge-story__selection::after { bottom:-.15rem; right:-.15rem; }
.bridge-story__timeline { display:flex; gap:.6rem; align-items:center; padding:.65rem .1rem .25rem; color:var(--bridge-muted); font:400 .45rem var(--font-mono,monospace); }
.bridge-story__timeline>div { position:relative; height:.65rem; flex:1; border-bottom:1px solid var(--bridge-line); background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--bridge-line) calc(25% - 1px),var(--bridge-line) 25%); }
.bridge-story__timeline i { position:absolute; width:.3rem; height:.3rem; top:.33rem; left:25%; background:var(--bridge-accent); transform:rotate(45deg); opacity:.25; }.bridge-story__timeline i:nth-child(2) { left:50%; }.bridge-story__timeline i:nth-child(3) { left:75%; }
.bridge-story__timeline b { position:absolute; left:0; top:0; width:1px; height:.8rem; background:var(--bridge-accent); }
.bridge-story__link { display:block; margin-top:.4rem; color:var(--bridge-muted); font-size:.48rem; }
.bridge-story__question { display:flex; gap:.5rem; align-items:baseline; }.bridge-story__question>span { color:var(--bridge-accent); }.bridge-story__question p { margin:0 0 .6rem; font-size:.78rem; line-height:1.6; }
.bridge-story__gate { display:flex; gap:.5rem; align-items:center; color:var(--bridge-muted); font-size:.55rem; }.bridge-story__gate b { margin-left:auto; color:var(--bridge-green); font-size:.5rem; font-weight:400; }
.bridge-story__tool { margin:.35rem 0 .55rem; color:var(--bridge-accent); font:400 .55rem/1.6 var(--font-mono,monospace); overflow-wrap:anywhere; }
.bridge-story__answer { min-height:3.5rem; }
.bridge-story__answer-title { margin:0; padding:.5rem .65rem; border-left:2px solid var(--bridge-accent); border-radius:0 .35rem .35rem 0; background:color-mix(in srgb,var(--bridge-accent) 6%,transparent); color:var(--bridge-ink); font-size:.7rem; line-height:1.65; transform-origin:left center; }
.bridge-story__output { margin:.4rem 0 0; color:var(--bridge-muted); font-size:.55rem; line-height:1.6; }
.bridge-story__wires,.bridge-story__packet { display:none; }
.bridge-story.is-enhanced .bridge-story__wires { display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:-1; }
.bridge-story__wires path { fill:none; stroke:var(--bridge-line); stroke-width:1; }
.bridge-story__wires .bridge-story__trail { stroke:var(--bridge-accent); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; stroke-linecap:round; opacity:0; }
.bridge-story__focus-light { position:absolute; left:-10rem; top:-8rem; width:20rem; height:16rem; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--bridge-accent) 8%,transparent),transparent 70%); opacity:0; pointer-events:none; z-index:-1; }
.bridge-story.is-enhanced .bridge-story__packet { position:absolute; display:grid; place-items:center; top:0; left:0; width:2rem; height:1.6rem; border:1px solid var(--bridge-accent); border-radius:.4rem; background:var(--bridge-bg); color:var(--bridge-accent); font:500 .45rem var(--font-mono,monospace); z-index:8; opacity:0; pointer-events:none; }
.bridge-story__tasks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.25rem 0 0; padding:0; list-style:none; }
.bridge-story__tasks li { display:grid; grid-template-columns:auto 1fr; gap:.25rem .55rem; align-items:center; min-width:0; color:var(--bridge-muted); opacity:.5; }
.bridge-story__tasks li>span { grid-row:span 2; display:grid; place-items:center; width:1.8rem; height:1.8rem; border:1px solid var(--bridge-line); border-radius:.4rem; font-size:.85rem; }
.bridge-story__tasks li[data-current] { color:var(--bridge-ink); opacity:1; }.bridge-story__tasks li[data-current]>span { border-color:var(--bridge-accent); color:var(--bridge-accent); }
.bridge-story__tasks strong { font-size:.65rem; font-weight:500; }.bridge-story__tasks code { color:var(--bridge-muted); font:400 .5rem/1.5 var(--font-mono,monospace); overflow-wrap:anywhere; }
.bridge-story__narration { display:flex; gap:.8rem; align-items:baseline; min-height:3.5rem; padding-top:1.15rem; margin-top:1.15rem; border-top:1px solid var(--bridge-line); }.bridge-story__narration>span { flex:none; color:var(--bridge-accent); font:400 .55rem/1.8 var(--font-mono,monospace); }.bridge-story__narration p { margin:0; color:var(--bridge-muted); font-size:.65rem; line-height:1.8; }
.bridge-story__caption { margin:.5rem 0 0; color:var(--bridge-muted); font-size:.55rem; line-height:1.8; }
@media (max-width:900px) { .bridge-story__stage { padding:1.25rem; }.bridge-story__manager { left:6%; }.bridge-story__ae { width:48%; right:0; }.bridge-story__agent { width:54%; left:1%; }.bridge-story__scene { height:23rem; } }
@media (max-width:680px) {
  .bridge-story .aenv-story__heading { display:block; margin-bottom:2rem; }.bridge-story .aenv-story__lead { margin-top:1rem; }
  .bridge-story__stage { padding:1rem; border-radius:.8rem; }.bridge-story__topline { font-size:.6rem; margin-bottom:1rem; gap:.5rem; }.bridge-story__chapters { gap:.5rem; }.bridge-story__chapters li { flex-direction:column; gap:.1rem; }.bridge-story__chapters strong { font-size:.58rem; }.bridge-story__chapters li>span { font-size:.5rem; }
  .bridge-story__scene { height:25rem; }.bridge-story__manager { width:5.3rem; left:0; top:2.8rem; }.bridge-story__manager .bridge-story__windowbody { gap:.4rem; padding:.75rem .3rem; }.bridge-story__manager strong { font-size:.6rem; }.bridge-story__manager small { font-size:.45rem; }.bridge-story__brand { width:1.7rem; height:1.7rem; font-size:.95rem; }
  .bridge-story__ae { width:68%; right:0; top:1rem; }.bridge-story__windowbar { gap:.35rem; padding:.6rem; font-size:.55rem; }.bridge-story__hostline { gap:.25rem; }.bridge-story__hostline>[data-bridge-health] { display:none; }.bridge-story__windowbody { padding:.6rem; }.bridge-story__composition { height:7rem; padding:1rem; }.bridge-story__composition b { font-size:1.3rem; }.bridge-story__composition>i { width:6rem; height:6rem; }.bridge-story__composition small { font-size:.43rem; }.bridge-story__selection { inset:2rem .6rem; }
  .bridge-story__agent { top:13rem; left:0; width:100%; }.bridge-story__agent .bridge-story__windowbar { font-size:.6rem; }.bridge-story__question p { font-size:.72rem; }.bridge-story__answer-title { font-size:.65rem; }.bridge-story__tasks { gap:.4rem; margin-top:.75rem; }.bridge-story__tasks li { display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; }.bridge-story__tasks strong { font-size:.58rem; }.bridge-story__tasks code { font-size:.45rem; }.bridge-story__tasks li>span { width:1.5rem; height:1.5rem; font-size:.72rem; }.bridge-story__narration { min-height:4.2rem; gap:.55rem; margin-top:.9rem; padding-top:.9rem; }.bridge-story__narration p { font-size:.6rem; }.bridge-story__caption { font-size:.5rem; }
}
@media (prefers-reduced-motion:reduce) { .bridge-story *, .bridge-story *::before, .bridge-story *::after { animation:none!important; transition:none!important; }.bridge-story__packet { display:none!important; }.bridge-story__selection { opacity:1; } }