.cross-attention { margin-block:var(--content-space); padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:1rem; line-height:1.5; }
.cross-attention * { box-sizing:border-box; }
.cross-attention [hidden] { display:none !important; }
.cross-attention .ca-heading h3 { font-size:1.4rem; margin:6px 0 16px; }
.cross-attention .eyebrow { margin:0; font-size:.7rem; }
.ca-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ca-toolbar .ca-controls { flex-shrink:0; }
.ca-controls { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ca-controls button { border:1px solid var(--border-strong); border-radius:6px; padding:9px 12px; min-height:44px; color:var(--ink); background:var(--paper); font:inherit; font-size:.85rem; cursor:pointer; }
.ca-controls button:disabled { opacity:.45; cursor:default; }
.ca-controls button:focus-visible, .ca-arithmetic summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.ca-diagram { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:48px; }
.cross-attention h4 { font:600 .85rem/1.4 Manrope,system-ui,sans-serif; margin:0 0 12px; }
.cross-attention .ca-tokens { list-style:none; margin:0; padding:0; }
.cross-attention .ca-tokens li { position:relative; z-index:1; display:flex; justify-content:space-between; gap:6px; padding:5px 10px; margin:0 0 5px; border-radius:5px; background:var(--paper); border:1px solid var(--line); font-size:.95rem; line-height:1.4; }
.ca-bank { box-shadow:inset 3px 0 #5880a2; }
.ca-target { position:relative; z-index:1; }
.cross-attention .ca-prefix { font-size:1rem; line-height:1.7; margin:0; }
.ca-prefix strong { display:table; margin-top:8px; padding:2px 8px; border:2px solid #b16c48; border-radius:5px; }
.cross-attention .ca-gloss,.cross-attention .ca-query-label { font-size:.8rem; line-height:1.5; margin:10px 0; }
.ca-query-label { font-weight:600; }
.ca-mixture { display:table; padding:8px; margin-top:20px; border:1px solid var(--border-strong); border-radius:6px; background:var(--paper); font-size:.85rem; }
.ca-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ca-lines path { fill:none; stroke:#5880a2; stroke-width:calc(1px + var(--weight) * 8px); opacity:.65; }
.cross-attention[data-enhanced][data-step="0"] .ca-lines { opacity:.18; }
.cross-attention[data-enhanced]:not([data-step="2"]) .ca-mixture { visibility:hidden; }
.cross-attention[data-playing="true"][data-step="1"] .ca-lines path { stroke-dasharray:5 4; animation:ca-flow 1s linear infinite; }
.cross-attention .ca-explanations { list-style:none; margin:18px 0 12px; padding:0; font-size:.9rem; }
.cross-attention .ca-explanations li { margin:8px 0; padding:0; }
.ca-explanations strong,.ca-explanations span { display:block; }
.cross-attention[data-enhanced] .ca-explanations { min-height:4.5em; }
.ca-arithmetic { font-size:.85rem; border-top:1px solid var(--line); padding-top:12px; }
.ca-arithmetic summary { cursor:pointer; }
.ca-arithmetic p { overflow-wrap:anywhere; }
.ca-value-list p { display:flex; justify-content:space-between; gap:8px; margin:6px 0; }
.cross-attention .ca-disclaimer,.cross-attention .ca-motion-note { font-size:.8rem; line-height:1.5; margin:12px 0 0; }
@keyframes ca-flow { to { stroke-dashoffset:-18; } }
@media(max-width:500px) {
 .cross-attention { padding:14px; }
 .ca-toolbar { display:block; }
 .ca-diagram { grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); gap:18px; }
 .cross-attention .ca-tokens li { gap:4px; padding:4px 5px; font-size:.85rem; }
 .ca-mixture { padding:4px; }
 .ca-controls button { min-width:44px; padding:8px; }
 .cross-attention .ca-heading h3 { font-size:1.15rem; }
 .cross-attention[data-enhanced] .ca-explanations { min-height:8em; }
}
@media(prefers-reduced-motion:reduce) { .ca-lines path { animation:none !important; } }
html[data-motion="paused"] .ca-lines path { animation:none !important; }