@layer components{.hero-vis{--pad: .5rem;--card-pt: 1rem;--card-px: 1rem;position:relative;display:grid;margin:0;padding:var(--pad);border-radius:var(--radius-panel);background:var(--hero-stage, var(--role))}.ans{display:flex;flex-direction:column;gap:.875rem;padding:var(--card-pt, 1rem) var(--card-px, 1rem) 1.125rem}.ans-label{color:var(--color-ink-2);font-size:var(--text-ui);font-weight:600;line-height:1.2}.bars{display:flex;flex-direction:column;gap:.625rem}.bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "track track";align-items:baseline;row-gap:.3125rem;font-size:var(--text-small);line-height:1.3}.bar-label{grid-area:label}.bar-value{grid-area:value;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}.bar-track{grid-area:track;display:block;height:.625rem}.bar-track i{display:block;width:calc(var(--v) * 100%);height:100%;border-radius:0 var(--radius-inner) var(--radius-inner) 0;background:var(--color-series);transform-origin:left center}@media(min-width:768px){.hero-vis{--pad: 2rem;--card-pt: 1.5rem;--card-px: 1.5rem}.ans{gap:1rem;padding-bottom:1.625rem}.bars{gap:.5rem}.bar{grid-template-columns:6.5rem minmax(0,1fr) 5.75rem;grid-template-areas:"label track value";align-items:center;column-gap:.875rem}.bar-track{height:.75rem}}@media(min-width:1200px){.hero-vis{--pad: 3rem;--card-pt: 1.75rem;--card-px: 2rem}.ans{gap:1.125rem;padding-bottom:2rem}.ans-label{font-size:var(--text-caption)}.hero-vis .ans-q{font-size:var(--text-lede);padding:.875rem 1.125rem}.bars{gap:.75rem}.bar{grid-template-columns:7.25rem minmax(0,1fr) 6.25rem;font-size:var(--text-body)}.bar-track{height:.875rem}.hero-vis .src-chip{font-size:var(--text-small);min-height:2rem;padding-inline:.75rem}}}@layer components{.hero .hero-vis{width:100%;max-width:64rem;text-align:left}.hv-scene{--chat-w: 26.5rem;--app-x: 23rem;display:grid;container-type:inline-size}.hv-scene>:is(.hv-chat,.hv-app){grid-area:1 / 1;min-width:0}.hv-app{display:none}@media(min-width:1024px){.hv-scene{grid-template-columns:[chat-s] minmax(0,var(--app-x)) [app-s] minmax(0,calc(var(--chat-w) - var(--app-x))) [chat-e] minmax(0,1fr) [app-e]}.hv-scene>.hv-chat{grid-area:1 / chat-s / 2 / chat-e;z-index:2}.hv-scene>.hv-app{grid-area:1 / app-s / 2 / app-e;z-index:1;display:flex}.hv-chat{transform:scale(.85);transform-origin:left top}.hv-chat .ans-text,.hv-chat .ans-reply{font-size:1.375rem;line-height:1.3;letter-spacing:-.014em}.hv-chat .bar{grid-template-columns:6.25rem minmax(0,1fr) 5.5rem;font-size:var(--text-small)}}}@layer components{:where(.motion) .loop :is(.bar-label,.bar-value){opacity:0;transition:opacity .3s linear calc(.25s + var(--i) * 90ms)}:where(.motion) .loop .bar-track i{transform:scaleX(0);transition:transform .7s var(--ease-out) calc(.25s + var(--i) * 90ms)}:where(.motion) .loop.is-a :is(.bar-label,.bar-value){opacity:1}:where(.motion) .loop.is-a .bar-track i{transform:none}:where(.motion) .loop .hv-app{display:flex;opacity:0;transform:translateY(1.25rem);transition:opacity var(--duration-state) linear,transform var(--duration-move) var(--ease-out)}:where(.motion) .loop.is-app .hv-app{opacity:1;transform:none}:where(.motion) .loop.is-app .hv-chat{opacity:0;transition:opacity .3s linear}@media(min-width:1024px){:where(.motion) .loop .hv-chat{transform:translate(calc((100cqw - var(--chat-w)) / 2));transition:transform var(--duration-move) var(--ease-out),opacity .45s linear}:where(.motion) .loop .hv-app{transform:translate(2rem)}:where(.motion) .loop.is-app .hv-chat{opacity:1;transform:scale(.85)}:where(.motion) .loop.is-app .hv-app{transform:none}}:where(.motion) .loop.is-out :is(.hv-chat,.hv-app){opacity:0;transition:opacity .45s linear}.hero-vis{--ctl-gap: .75rem;--ctl: 2.5rem;--ctl-b: var(--ctl-gap);padding-bottom:calc(2 * var(--ctl-gap) + var(--ctl))}@media(min-width:768px){.hero-vis{--ctl-gap: 1rem}}}