.leverage-balloon-root { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: center; }
.leverage-balloon-root .w-note { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }
.leverage-balloon-root .leverage-balloon-left { min-width: 0; }
.leverage-balloon-root .leverage-balloon-art { display: block; width: 100%; max-width: min(100%, calc(12rem + 10vw), 21rem); height: auto; margin-inline: auto; overflow: visible; }
.leverage-balloon-root .leverage-balloon-skin { fill: var(--brand); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.leverage-balloon-root .leverage-balloon-shine { fill: var(--paper); opacity: .5; }
.leverage-balloon-root .leverage-balloon-knot { fill: var(--ink); }
.leverage-balloon-root .leverage-balloon-string { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.leverage-balloon-root .leverage-balloon-basket { fill: var(--ink); }
/* text inside the balloon drawing: SVG units, so it scales with the picture */
.leverage-balloon-root .leverage-balloon-tag { font: 700 var(--fs-num) var(--font-ui); font-variant-numeric: tabular-nums; fill: var(--on-ink); pointer-events: none; }
.leverage-balloon-root .leverage-balloon-burst line { stroke: var(--down); stroke-width: 4; stroke-linecap: butt; }
.leverage-balloon-root .leverage-balloon-burst text { font: 700 var(--fs-num) var(--font-ui); fill: var(--down); }
.leverage-balloon-root .leverage-balloon-right { display: grid; gap: var(--s4); min-width: 0; }
.leverage-balloon-root .leverage-balloon-outs { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.leverage-balloon-root .leverage-balloon-meter { display: grid; gap: var(--s1); }
.leverage-balloon-root .leverage-balloon-tanktxt { margin: 0; font: 700 var(--fs-ui)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.leverage-balloon-root .leverage-balloon-wrap { position: relative; padding-block: var(--s4); }
.leverage-balloon-root .leverage-balloon-tank { position: relative; height: 8px; background: var(--mist-2); }
.leverage-balloon-root .leverage-balloon-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--up); }
.leverage-balloon-root .leverage-balloon-meter[data-tone="down"] .leverage-balloon-fill { background: var(--down); }
.leverage-balloon-root .leverage-balloon-mc { position: absolute; top: -6px; bottom: -6px; width: 0; margin-left: -1px; border-left: 2px dashed var(--ink); }
.leverage-balloon-root .leverage-balloon-stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); padding: 2px 10px; border: 2px solid var(--down); border-radius: var(--r-sm); background: var(--paper); color: var(--down); font: 700 var(--fs-small)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: var(--track-eyebrow); white-space: nowrap; }
.leverage-balloon-root .leverage-balloon-hint:empty { display: none; }
.leverage-balloon-root .leverage-balloon-right .w-note { margin: 0; }