/* Compound Interest lesson. All rules scoped under .ci-* */

.ci-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ci-sc > svg { display: block; width: 100%; height: auto; max-height: 48vh; overflow: visible; }
.ci-hero { width: min(88%, 340px); }
.ci-hero img { width: 100%; display: block; }
.ci-note { font-size: 12px; color: var(--faint); text-align: center; }

/* towers */
.ci-floor { stroke: var(--line-strong); stroke-width: 2; }
.ci-tname { font: 800 15px var(--sans); fill: var(--text); text-anchor: middle; }
.ci-base { fill: #3A3570; stroke: var(--violet-bright); stroke-width: 1.5; }
.ci-baselab { font: 700 14px var(--sans); fill: var(--violet-bright); text-anchor: middle; }
.ci-blk { fill: var(--gold); stroke: #0A0E1A; stroke-width: .6; }
.ci-blk.ci-alt { fill: #E0A83A; }
.ci-ioi { fill: var(--mint); stroke: none; }
.ci-total { font: 800 17px var(--serif); fill: var(--text); text-anchor: middle; }
.ci-cl { font: 800 14px var(--sans); fill: var(--gold); text-anchor: middle; }
.ci-cl.ci-mintl { fill: var(--mint); }
.ci-side { font: 700 13px var(--sans); fill: var(--mint); text-anchor: start; }
.ci-arrow { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* chart */
.ci-gl { stroke: var(--line); stroke-width: 1; }
.ci-yl { font: 600 12px var(--sans); fill: var(--dim); text-anchor: end; }
.ci-tick { stroke: var(--line-strong); stroke-width: 1; }
.ci-xl { font: 600 12px var(--sans); fill: var(--dim); text-anchor: middle; }
.ci-xcap { font: 600 12px var(--sans); fill: var(--faint); text-anchor: end; }
.ci-line { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ci-simple { fill: none; stroke: var(--dim); stroke-width: 2; stroke-dasharray: 5 4; }
.ci-guess { fill: none; stroke: var(--violet-bright); stroke-width: 2.5; stroke-dasharray: 6 5; }
.ci-owe { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ci-band40 { fill: rgba(169, 155, 255, .10); }
.ci-band10 { fill: rgba(252, 192, 80, .16); }
.ci-mark text { font: 800 13px var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.ci-mark circle { stroke: var(--bg); stroke-width: 2; }
.ci-gold circle { fill: var(--gold); } .ci-gold text { fill: var(--gold); }
.ci-violet circle { fill: var(--violet-bright); } .ci-violet text { fill: var(--violet-bright); }
.ci-grey circle { fill: var(--dim); } .ci-grey text { fill: var(--dim); }
.ci-plain circle { fill: var(--text); } .ci-plain text { fill: var(--text); }

.ci-rate { padding: 5px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--dim); }
.ci-rate b { color: var(--gold); font-weight: 800; }

@media (max-height: 700px) {
  .ci-sc > svg { max-height: 40vh; }
  .ci-hero { width: min(70%, 260px); }
}