.currency-return-root { display: grid; gap: var(--s5); }
.currency-return-root .w-note { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }
.currency-return-root .currency-return-story { margin: 0; font: 400 var(--fs-ui)/1.5 var(--font-ui); color: var(--ink); }
.currency-return-root .currency-return-sliders { display: grid; gap: var(--s4) var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: start; }
.currency-return-root .currency-return-outs { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.currency-return-root .currency-return-outs .w-readout-note { overflow-wrap: anywhere; }
.currency-return-root .currency-return-home .w-readout-label { color: var(--ink); }
/* the waterfall: three thin bars around a zero line, no panel behind them */
.currency-return-root .currency-return-fall { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: var(--rule); }
.currency-return-root .currency-return-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: baseline; }
.currency-return-root .currency-return-name { min-width: 0; font: 400 var(--fs-small)/1.3 var(--font-ui); color: var(--ink-2); overflow-wrap: anywhere; }
.currency-return-root .currency-return-val { max-width: 100%; font: 700 var(--fs-ui)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.currency-return-root .currency-return-row[data-tone="up"] .currency-return-val { color: var(--up); }
.currency-return-root .currency-return-row[data-tone="down"] .currency-return-val { color: var(--down); }
.currency-return-root .currency-return-track { grid-column: 1 / -1; position: relative; height: 8px; margin-block: 4px; background: var(--mist); }
.currency-return-root .currency-return-zero { position: absolute; left: 50%; top: -4px; bottom: -4px; margin-left: -1px; border-left: 2px solid var(--ink); z-index: 1; }
.currency-return-root .currency-return-bar { position: absolute; top: 0; bottom: 0; background: var(--ink-3); transition: left .25s var(--ease), width .25s var(--ease); }
.currency-return-root .currency-return-row[data-tone="up"] .currency-return-bar { background: var(--up); }
.currency-return-root .currency-return-row[data-tone="down"] .currency-return-bar { background: var(--down); }
.currency-return-root .currency-return-total .currency-return-name { color: var(--ink); font-weight: 700; }
.currency-return-root .currency-return-total .currency-return-val { font-size: var(--fs-ui-lg); }
.currency-return-root .currency-return-total .currency-return-track { height: 12px; }
.currency-return-root .currency-return-legend { margin: 0; font-size: var(--fs-small); color: var(--ink-3); }
.currency-return-root .currency-return-rate { margin: 0; }
@media (prefers-reduced-motion: reduce) { .currency-return-root .currency-return-bar { transition: none; } }