:root{--ink:#132c31;--muted:#5d6d6c;--paper:#f8f8f3;--line:#dde2d9;--deposit:#286a55;--withdraw:#8c5a23;--investment:#a94d52}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #126c78;outline-offset:4px}a{color:inherit}header{max-width:1320px;margin:auto;padding:25px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{font:600 21px Georgia,serif;text-decoration:none}.brand span{font-weight:400;font-style:italic}.client{font-size:10px;letter-spacing:1.4px;display:flex;align-items:center;gap:18px}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e7ebdf;letter-spacing:0}.concept{background:#e8ecdf;font-size:10px;letter-spacing:1.5px;text-align:center;padding:9px 20px}.concept span{letter-spacing:.2px;margin-left:16px;color:#54605a}main{max-width:1320px;margin:auto;padding:42px 40px 0}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:650}.intro{display:flex;justify-content:space-between;align-items:end;margin:12px 0 36px}h1{font:400 clamp(40px,4.2vw,64px)/1.06 Georgia,serif;letter-spacing:-2px;margin:0}.intro p{color:var(--muted);margin:0 12% 3px 25px;font-size:17px;line-height:1.7}h2{font:400 23px/1.25 Georgia,serif;margin:0}.overview{display:flex;justify-content:space-between;align-items:center;padding:26px 0 30px;border-top:1px solid var(--line)}.label{font-size:12px;color:var(--muted)}.balance{font-size:46px;line-height:1.2;font-weight:450;letter-spacing:-1.8px;font-variant-numeric:tabular-nums}.muted{color:var(--muted);font-size:13px;margin:8px 0}.period{text-align:right}.period>div{display:flex;gap:3px;padding:4px;background:#e9ede4;border-radius:7px;margin-top:10px}.period button{border:0;background:none;padding:7px 16px;border-radius:5px;font-size:12px}.period button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #18352d15;color:var(--ink)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--line);border-radius:12px;background:white;overflow:hidden}.chart-panel{padding:28px 28px 22px;min-width:0}.section-head{display:flex;justify-content:space-between;gap:15px;align-items:center}.text-button{background:none;border:0;color:var(--muted);font-size:11px;padding:7px 0}.legend{display:flex;gap:23px;margin:22px 0 4px;color:var(--muted);font-size:11px;flex-wrap:wrap}.legend span{display:flex;align-items:center;gap:7px}i{width:8px;height:8px;border-radius:50%;display:inline-block}i.dashed{border-top:2px dashed #758a89;width:16px;height:0;border-radius:0}.chart-wrap{position:relative}svg{display:block;width:100%;overflow:visible}svg text{font:11px -apple-system,sans-serif;fill:var(--muted)}.band{opacity:0}.band.active{opacity:1}svg[data-active]:not([data-active=all]) .balance-line{opacity:.38}.point{font-size:11px;border:1px solid var(--line);padding:6px 12px;border-radius:5px;background:#fff;position:absolute;right:10px;top:8px;pointer-events:none;box-shadow:0 3px 10px #132c310a}.scrub-label{font-size:11px;display:flex;justify-content:space-between;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--ink);margin:12px 0 17px}.explain{background:#f2f4ed;border-radius:7px;padding:17px 20px;min-height:88px;font-size:13px}.explain b{display:block;margin-bottom:4px}.small{font-size:11px;line-height:1.65;color:var(--muted);margin:15px 0 0}.breakdown{border-left:1px solid var(--line);padding:28px 24px;background:#fcfcf9}.breakdown h2{font-size:27px;margin:9px 0 25px}.starting,.ending{display:flex;justify-content:space-between;font-size:12px;align-items:center;padding:15px 0}.ending{border-top:1px solid var(--line);margin-top:8px;font-size:14px}.ending strong{font-size:21px}.component{width:100%;display:block;border:1px solid transparent;background:none;text-align:left;border-radius:8px;padding:14px 11px;margin:5px 0;color:var(--ink)}.component:hover,.component[aria-pressed=true]{background:var(--tint);border-color:var(--color)}.component .row{display:flex;justify-content:space-between;gap:5px;font-size:13px;font-weight:600}.component small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.component .value{color:var(--color);font-variant-numeric:tabular-nums}.component .bar{height:4px;background:var(--tint);border-radius:5px;margin-top:12px}.component .bar span{display:block;height:100%;background:var(--color);border-radius:5px}.details{padding:32px 0}.details h2{margin-top:7px}.pill{border:1px solid var(--line);border-radius:30px;padding:5px 12px;font-size:11px}.transaction{display:grid;grid-template-columns:95px 1fr auto;gap:20px;border-bottom:1px solid var(--line);padding:15px 0;font-size:13px}.transaction .date{color:var(--muted);font-size:12px}.transaction small{color:var(--muted);display:block;font-size:11px}.method{border-top:1px solid var(--line);padding:18px 0;font-size:12px;color:var(--muted)}summary{cursor:pointer;color:var(--ink)}.method p{max-width:900px}footer{border-top:1px solid var(--line);padding:23px 0 30px;font-size:11px;display:flex;justify-content:space-between;color:var(--muted)}@media(max-width:950px){.workspace{grid-template-columns:1fr}.breakdown{border-left:0;border-top:1px solid var(--line)}#components{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.breakdown h2{margin-bottom:8px}.intro p{margin-right:0}main{padding:30px 22px 0}header{padding:20px 22px}}@media(max-width:600px){.concept span{display:block;margin:2px 0 0;font-size:10px}.intro{display:block}.intro p{margin:20px 0 0;font-size:14px}h1{font-size:43px}.overview{align-items:start;gap:18px}.balance{font-size:35px}.period button{padding:6px 9px;font-size:11px}.period .label{font-size:10px}h2{font-size:20px}.chart-panel{padding:22px 16px}.legend{gap:10px;font-size:10px}.component{padding:11px 8px}.component .row{display:block;font-size:12px}.component .value{display:block;margin-top:4px}.component small{font-size:10px}.transaction{grid-template-columns:65px 1fr auto;gap:10px}.client{font-size:9px}.brand{font-size:19px}.point{font-size:10px}.explain{padding:15px}footer{gap:20px}}

/* Revised client-view system */
:root{--ink:#172f35;--muted:#586970;--paper:#f7f5ef;--line:#dce3df;--deposit:#126c78;--withdraw:#64748b;--investment:#a35e34}
body{font-family:"Space Grotesk","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
h1,h2,.brand{font-family:inherit;font-weight:600;letter-spacing:-.045em}
h1{font-size:clamp(35px,4vw,55px)}.intro{margin-bottom:24px}.intro p{font-size:15px}.balance{font-weight:550;font-variant-numeric:tabular-nums lining-nums}
.component .bar{display:none}.component{min-height:90px}.component .row{font-variant-numeric:tabular-nums}.chart-panel{order:2}.breakdown{order:1;border-left:0;border-right:1px solid var(--line)}.workspace{grid-template-columns:300px minmax(0,1fr)}.breakdown{background:#fdfcf8}.breakdown h2{font-size:23px}
.balance-line{stroke:#9badaa!important}.point{box-shadow:none;border-color:var(--line)}#chart{touch-action:pan-y}#dot{r:6;stroke:#174f59;stroke-width:3}.explain{background:#edf3f0}.concept{background:#e7eeea}.method{margin-top:10px}
@media(max-width:950px){.workspace{grid-template-columns:1fr}.breakdown{border-right:0;border-bottom:1px solid var(--line)}.breakdown h2{margin:5px 0 10px}.starting,.ending{padding:8px 0}.breakdown>.small{display:none}.component{min-height:90px}.intro{margin-bottom:20px}}
@media(max-width:600px){header{padding:14px 18px}main{padding:22px 16px 0}.intro p{margin-top:12px;font-size:13px}.intro p br{display:none}.intro{margin-bottom:16px}.overview{padding:16px 0}.balance{font-size:32px}.period>div{gap:0}.period button{padding:5px 7px}.workspace{overflow:visible}.breakdown{padding:16px;border-radius:12px 12px 0 0}.breakdown .eyebrow{display:none}.breakdown h2{font-size:18px}.component{margin:0;padding:9px 6px;min-height:84px}.component small{font-size:10px}.component .row{font-size:10px}.component .value{font-size:12px}.component .bar{display:none}.chart-panel{padding:18px 14px}.chart-panel h2{font-size:17px}.legend{margin-top:14px}svg text{font-size:18px}.section-head{gap:5px}.explain{min-height:75px}.point{font-size:10px}}

/* Chart-first layout and explicit card affordance */
.workspace{display:flex;flex-direction:column}.chart-panel{order:0;padding-bottom:18px}.breakdown{order:1;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 28px}.breakdown h2{font-size:21px;margin:4px 0 12px}.breakdown>.eyebrow,.breakdown>.small{display:none}#components{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.component{border:1px solid #b8c7c4;background:#fff;margin:4px 0;min-height:132px;padding:16px;border-radius:12px;box-shadow:0 2px 4px #172f3508}.component .row{display:block;font-size:14px}.component .value{display:block;margin-top:8px;font-size:20px}.component:hover{box-shadow:0 3px 10px #172f3515}.component[aria-pressed=true]{border:2px solid var(--color);padding:15px;background:var(--tint)}.card-action{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:11px;font-weight:600;color:var(--ink)}.card-action>span{border:1px solid #b8c7c4;border-radius:50%;width:23px;height:23px;text-align:center;line-height:21px}.component[aria-pressed=true] .card-action>span{background:var(--color);border-color:var(--color);color:white}.starting,.ending{padding:8px 0}.ending{margin-top:12px}.chart-feedback{order:2;padding:20px 28px}.chart-feedback>.small{margin-top:10px}#chart:focus{outline:none}#chart:focus-visible{outline:2px solid #126c78;outline-offset:4px;border-radius:4px}#chart{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
@media(max-width:600px){.chart-panel{padding:18px 14px 12px}.breakdown{padding:16px 14px}.breakdown h2{font-size:18px}#components{gap:7px}.component{padding:10px 8px;min-height:154px}.component[aria-pressed=true]{padding:9px 7px}.component .row{font-size:11px}.component .value{font-size:14px;letter-spacing:-.02em}.component small{font-size:10px}.card-action{font-size:10px;margin-top:12px;gap:3px}.card-action>span{flex-shrink:0;width:19px;height:19px;line-height:17px}.chart-feedback{padding:16px 14px}.scrub-label{font-size:10px}}

/* Client reading order: balance, history, causes, activity */
.account-title{font-size:19px;letter-spacing:-.03em;margin:0 0 14px;font-weight:600}.overview{border-top:0;padding-top:0}.balance{font-size:50px}.breakdown-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}.breakdown-head h2{margin:0}.chart-hint{font-size:11px;color:var(--muted);margin:0;text-align:right}.chart-feedback[hidden]{display:none}.chart-feedback{padding:12px 28px}.explain{min-height:0;background:none;padding:0;font-weight:600}.component .card-action{margin-top:12px}.details{padding-top:28px}#detail-copy{margin:6px 0 12px}.ending{font-size:13px}.component small{font-size:12px}.concept{letter-spacing:.8px}.starting{color:var(--muted)}.starting strong{color:var(--ink)}
@media(max-width:600px){main{padding-top:18px}.account-title{font-size:16px;margin-bottom:12px}.balance{font-size:34px}.overview{padding-top:0;padding-bottom:18px}.breakdown-head{display:block;margin-bottom:10px}.breakdown-head h2{font-size:18px;margin-bottom:4px}.breakdown-head .label{font-size:11px}.component .row{font-size:11px}.component .value{font-size:14px}.component small{font-size:11px}.component{min-height:142px}.card-action{font-size:10px}.chart-feedback{padding:12px 14px}.ending strong{font-size:20px}.transaction{font-size:12px}.chart-hint{font-size:10px}}

#chart{cursor:pointer}

#reset{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid #a9bcb7;border-radius:8px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;box-shadow:0 1px 2px #172f3510}#reset:hover{background:#edf3f0;border-color:#174f59}#reset:active{background:#dfeae6}#reset:focus-visible{outline:2px solid #126c78;outline-offset:3px}@media(max-width:600px){#reset{padding:8px 10px;font-size:11px}}

.legend [hidden]{display:none}

/* Grouped evidence and complete reconciliation */
.activity-group{margin:20px 0 28px}.subtotal{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:2px solid var(--line)}.subtotal h3{font-size:17px;margin:0;letter-spacing:-.02em}.subtotal>strong{font-size:19px;font-variant-numeric:tabular-nums}.group-note{font-size:12px;color:var(--muted);margin:8px 0 12px}.deposit-amount{color:#126c78}.withdraw-amount{color:#59697d}.gain{color:#147a59}.loss{color:#b33455}.balance-summary{background:#edf3f0;border:1px solid #d4dfda;border-radius:12px;padding:22px 24px;margin-top:30px}.balance-summary h3{margin:0;font-size:19px;letter-spacing:-.02em}.balance-summary dl{margin:18px 0 0}.balance-summary dl>div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:14px}.balance-summary dt,.balance-summary dd{margin:0}.balance-summary dd{font-weight:600;font-variant-numeric:tabular-nums}.balance-summary dl>div:has(.change-total){border-top:1px solid #cbd8d1;margin-top:8px;padding-top:16px}.balance-summary dl>div:has(.summary-end){align-items:center;padding-top:12px}.summary-end{font-size:26px;color:var(--ink)}
@media(max-width:600px){.subtotal h3{font-size:16px}.subtotal>strong{font-size:17px}.balance-summary{padding:18px 16px}.balance-summary dl>div{font-size:13px}.summary-end{font-size:23px}}

/* Shared light/dark tokens */
:root{color-scheme:light;--ink:#142033;--muted:#536176;--paper:#f5f7fb;--line:#d4deec;--surface:#ffffff;--surface-soft:#f8faff;--surface-raised:#eaf0fa;--control-surface:#e9eef8;--control-border:#687c96;--focus:#1659cf;--deposit:#1659cf;--withdraw:#53647d;--investment:#a34700;--deposit-tint:#eaf1ff;--withdraw-tint:#edf1f7;--investment-tint:#fff1e5;--gain:#147a59;--loss:#b33455;--chart-accent:#2563eb;--chart-muted:#647995;--chart-baseline:#66758b;--chart-grid:#e0e7f1;--on-accent:#fff}
:root[data-theme=dark]{color-scheme:dark;--ink:#eef4ff;--muted:#aebed6;--paper:#0d1421;--line:#344764;--surface:#141f30;--surface-soft:#19263a;--surface-raised:#1c2d45;--control-surface:#21334e;--control-border:#7489a6;--focus:#7eafff;--deposit:#7eafff;--withdraw:#b6c5dc;--investment:#ffb06a;--deposit-tint:#192e50;--withdraw-tint:#263449;--investment-tint:#402c21;--gain:#7ddbab;--loss:#ffa3ac;--chart-accent:#79aaff;--chart-muted:#8198ba;--chart-baseline:#a6b8d3;--chart-grid:#2d3e58;--on-accent:#101a2c}
body,button{color:var(--ink)}body{background:var(--paper)}
.workspace,.component,.point,#reset{background:var(--surface)}.breakdown{background:var(--surface-soft)}.concept,.avatar,.period>div{background:var(--control-surface)}.concept span{color:var(--muted)}.period button[aria-pressed=true]{background:var(--surface);box-shadow:0 1px 4px #0002}.point{color:var(--ink)}.balance-summary{background:var(--surface-raised);border-color:var(--line)}.balance-summary dl>div:has(.change-total){border-color:var(--line)}
.component,.card-action>span,#reset{border-color:var(--control-border)}.component:hover,.component[aria-pressed=true]{background:var(--tint);border-color:var(--color)}.component[aria-pressed=true] .card-action>span{color:var(--on-accent)}.component .value{color:var(--color)}.component .value.loss,.loss{color:var(--loss)}.component .value.gain,.gain{color:var(--gain)}.deposit-amount{color:var(--deposit)}.withdraw-amount{color:var(--withdraw)}.summary-end{color:var(--ink)}
#reset:hover{background:var(--surface-raised);border-color:var(--chart-accent)}#reset:active{background:var(--control-surface)}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,#reset:focus-visible,#chart:focus-visible{outline-color:var(--focus)}.balance-line{stroke:var(--chart-muted)!important}#dot{stroke:var(--chart-accent);fill:#fff}i.dashed{border-color:var(--chart-baseline)}svg text{font-family:"Space Grotesk",-apple-system,sans-serif}
.header-actions{display:flex;align-items:center;gap:24px}#theme-toggle{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid var(--control-border);border-radius:8px;padding:8px 12px;background:var(--surface);font-size:12px;font-weight:600;white-space:nowrap}.theme-track{display:block;width:30px;height:18px;border:1px solid var(--control-border);background:var(--control-surface);border-radius:12px;position:relative}.theme-track:after{content:'';width:12px;height:12px;border-radius:50%;position:absolute;left:2px;top:2px;background:var(--ink)}#theme-toggle[aria-checked=true] .theme-track{background:var(--deposit);border-color:var(--deposit)}#theme-toggle[aria-checked=true] .theme-track:after{left:14px;background:var(--on-accent)}
.period button{min-width:44px;min-height:44px;white-space:nowrap}.label,.legend,.card-action,.transaction .date,.transaction small,.point,.chart-hint,.group-note{font-size:12px}.component small{font-size:13px}.method{font-size:13px}summary{min-height:44px;padding:10px 0}.component .card-action{font-size:12px}
@media(max-width:600px){header{gap:10px}.brand{font-size:18px}.header-actions{gap:0}.header-actions .client{display:none}#theme-toggle{padding:8px 10px;font-size:12px}main{padding-top:18px}.overview{flex-direction:column;align-items:stretch;gap:10px}.period{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:10px;flex-wrap:wrap}.period>div{margin:0;gap:2px}.period button{font-size:12px;padding:8px 10px}.period .label{font-size:12px}.legend{font-size:12px;gap:10px}.point{font-size:12px}.chart-hint{font-size:12px}#components{grid-template-columns:1fr;gap:8px}.component{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:88px;padding:12px;margin:0}.component[aria-pressed=true]{padding:11px}.component .row{display:contents}.component .row>span:first-child{grid-column:1;grid-row:1;font-size:13px}.component .value{grid-column:2;grid-row:1;font-size:18px;margin:0}.component small{grid-column:1;grid-row:2;font-size:12px}.component .card-action{grid-column:2;grid-row:2;font-size:12px;margin:6px 0 0;gap:8px}.card-action>span{width:23px;height:23px;line-height:21px}.starting,.ending{font-size:13px}.breakdown-head .label{font-size:12px}.transaction{grid-template-columns:68px minmax(0,1fr) auto;font-size:13px}.transaction .date,.transaction small{font-size:12px}.balance-summary dl>div{font-size:14px}.subtotal{gap:8px}.subtotal h3{font-size:16px}.subtotal>strong{font-size:17px}.concept,.concept span{font-size:11px}}
@media(max-width:360px){header{padding-left:14px;padding-right:14px}.brand{font-size:16px}#theme-toggle{padding:8px;font-size:12px}.chart-panel .section-head{align-items:start}.chart-panel h2{padding-top:10px;font-size:17px}.component .value{font-size:16px}.component .card-action{font-size:12px}.subtotal>strong{font-size:16px}}

svg[data-active]:not([data-active=all]) .balance-line{opacity:1}

.balance{font-weight:600}.brand span{font-style:normal}.component .row,.balance-summary dd,.subtotal>strong,.transaction strong,.point{font-variant-numeric:tabular-nums lining-nums}.period button[aria-pressed=true]{box-shadow:inset 0 -3px 0 var(--deposit)}
/* The opening line is the only animated chart element. */
#chart[data-intro] .balance-line,#chart[data-intro] #crosshair{opacity:0}
.chart-wrap:has(#chart[data-intro]) .point{visibility:hidden}

.chart-meta{display:flex;align-items:center;gap:12px;margin-top:4px;flex-wrap:wrap}
.chart-meta .chart-hint{margin:0 0 0 auto}
#motion-toggle{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);font-size:12px}
#motion-toggle:hover{background:var(--surface-raised);color:var(--ink)}
#motion-toggle>span{min-width:23px;font-weight:600;color:var(--ink)}
@media(prefers-reduced-motion:reduce){#motion-toggle{display:none}}

.legend [hidden]{display:none}
.legend .actual-swatch{background:var(--chart-accent)}
#transfer-bands-legend:not([hidden]){display:flex;flex-wrap:wrap;gap:4px 12px}
.deposit-swatch,.withdraw-swatch{width:12px;height:8px;border-radius:2px}
.deposit-swatch{border:1px solid var(--deposit);background:var(--deposit-tint)}
.withdraw-swatch{border:1px solid var(--withdraw);background:var(--withdraw-tint)}
/* Match the dark chart fills at their strongest point. Withdrawals sit over deposits. */
:root[data-theme=dark]{
 --deposit-chart-swatch:color-mix(in srgb,var(--deposit) 30%,var(--surface));
 --withdraw-chart-swatch:color-mix(in srgb,var(--withdraw) 30%,var(--deposit-chart-swatch));
}
:root[data-theme=dark] .deposit-swatch{background-color:var(--deposit-chart-swatch)}
:root[data-theme=dark] .withdraw-swatch{background-color:var(--withdraw-chart-swatch)}
.legend i{flex:none}
.legend strong{color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

#components{grid-template-columns:repeat(2,minmax(0,1fr))}
#components .component{
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:auto 1fr auto;
 gap:10px;
 min-height:0;
 padding:13px;
}
#components .component[aria-pressed=true]{padding:12px}
#components [data-key=transfers]{--color:var(--deposit);--tint:var(--deposit-tint)}
#components [data-key=investment]{--color:var(--investment);--tint:var(--investment-tint)}
.component-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.component-label{font-size:14px;font-weight:600}
.selection-mark{margin-right:2px}
.component-total{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
#components .value{margin:0;font-size:19px;font-weight:650;line-height:1.2;white-space:nowrap}
.net-label,.transfer-key{color:var(--muted);font-size:12px}
.transfer-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.transfer-split>span{display:grid;gap:2px}
.transfer-split strong{font-size:14px;font-variant-numeric:tabular-nums lining-nums}
.transfer-key{display:flex;align-items:center;gap:6px}
#components .component-copy{grid-column:auto;grid-row:auto;margin:0;color:var(--muted)}
#components .card-action{grid-column:auto;grid-row:auto;margin:0}
@media(max-width:600px){
 #components{grid-template-columns:1fr}
}
@media(max-width:360px){
 .legend{font-size:11px}
 #transfer-bands-legend:not([hidden]){column-gap:7px}
 #transfer-bands-legend>span{gap:4px}
 #transfer-bands-legend .deposit-swatch,#transfer-bands-legend .withdraw-swatch{width:10px}
 #transfer-bands-legend .dashed{width:14px}
 #components .value{font-size:16px}
 .component-label{font-size:13px}
}