.vector-space { height:440px; aspect-ratio:auto; --_card-stage-track-min:min-content; & .card-stage { display:flex; flex-direction:column; justify-content:space-between; gap:100px; overflow:clip; background:radial-gradient(ellipse at 63% 52% in oklab,color-mix(in oklab,var(--card-accent) 5%,transparent),transparent 70%); } & .vector-canvas,& .vector-fallback { position:absolute; width:100%; height:100%; inset:0; } &[data-vector-ready="true"] .vector-fallback { display:none; } & .vector-query { display:flex; align-items:center; gap:9px; position:relative; z-index:2; align-self:flex-start; margin:4px 24px 0; max-width:calc(100% - 48px); padding:9px 13px; border:1px solid var(--card-line); border-radius:6px; background:var(--card-panel); font-size:12px; box-shadow:0 3px 9px #00000003; } & .vector-query span { min-width:0; } & .vector-query svg { flex:none; width:14px; height:14px; fill:none; stroke:var(--card-muted); stroke-width:1.4; } & .vector-result { display:flex; align-items:center; gap:7px; flex-wrap:wrap; position:relative; z-index:2; margin:0 24px 21px; font-size:11px; } & .vector-result i { flex:none; width:5px; height:5px; border-radius:50%; background:var(--card-accent); } & .vector-tag { margin-left:auto; color:var(--card-muted); } }