/* Compound interest lesson. All rules scoped under .ci-* */
.ci-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ci-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }

/* the offer */
.ci-offer { flex-direction: row; justify-content: center; align-items: stretch; gap: 8px; }
.ci-opt { flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: center; animation: ci-in .6s cubic-bezier(.2,.8,.2,1) both; }
.ci-opt.b { animation-delay: .35s; }
.ci-opt img { height: 96px; width: auto; max-width: 100%; object-fit: contain; }
.ci-opt.b img { height: 64px; margin: 16px 0; animation: ci-drop .7s .35s cubic-bezier(.3,1.4,.5,1) both; }
.ci-opt b { font: 800 24px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.ci-opt span { font: 600 13px var(--sans); color: var(--dim); line-height: 1.3; }
.ci-or { align-self: center; font: 700 14px var(--sans); color: var(--faint); }
@keyframes ci-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes ci-drop { from { opacity: 0; transform: translateY(-60px) rotate(-30deg); } }

/* the month */
.ci-full { flex: 1; justify-content: flex-end; padding: 0 16px 52px; box-sizing: border-box; }
.ci-month { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ci-full .ci-month { flex: 1; justify-content: flex-end; }
.ci-pile { position: relative; flex: 1; min-height: 150px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.ci-short .ci-pile { min-height: 0; flex: 0 0 auto; }
.ci-img { --s: .72; height: 150px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ci-short .ci-img { height: 104px; }
.ci-img img { max-height: 100%; max-width: 92%; object-fit: contain; transform: scale(var(--s)); transform-origin: 50% 100%; transition: transform .25s; }
.ci-pile.pop .ci-img img { animation: ci-pop .35s; }
@keyframes ci-pop { 40% { filter: brightness(1.5); } }
.ci-read { display: flex; align-items: baseline; gap: 10px; }
.ci-read span { font: 700 14px var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
.ci-read b { font: 800 30px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.ci-mil { position: absolute; top: 0; left: 50%; translate: -50% 0; padding: 4px 12px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font: 800 12.5px var(--sans); font-style: normal; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.ci-pile.mil .ci-mil { opacity: 1; }
.ci-cal { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 44px); gap: 4px; width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.ci-day { display: grid; place-items: center; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font: 700 13px var(--sans); color: var(--faint); transition: background .15s, color .15s; pointer-events: none; }
.ci-day.on { background: var(--gold); border-color: var(--gold); color: #2a1d00; }
.ci-day.on.cut { background: var(--surface); border-color: var(--line-strong); color: var(--faint); }
.ci-day.cut span { text-decoration: line-through; }
.ci-short .ci-cal { grid-template-rows: repeat(5, 30px); }
@media (max-height: 700px) {
  .ci-img { height: 110px; }
  .ci-cal { grid-template-rows: repeat(5, 40px); }
  .ci-short .ci-img { height: 84px; }
  .ci-short .ci-cal { grid-template-rows: repeat(5, 24px); }
  .ci-short .ci-day { font-size: 12px; }
}

/* the jar */
.ci-jarsc { flex-direction: row; justify-content: center; align-items: flex-end; gap: 14px; min-height: 190px; }
.ci-jar { position: relative; width: 130px; display: flex; flex-direction: column; align-items: center; }
.ci-jar img { width: 120px; height: auto; }
.ci-bal { font: 800 24px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.ci-coin { width: 78px; height: 78px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 35%, #FFE7A8, var(--gold) 55%, var(--gold-deep)); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.35); margin-bottom: 70px; transition: transform .55s cubic-bezier(.5,0,.6,1), opacity .4s .3s; }
.ci-coin b { font: 900 18px var(--sans); color: #3a2800; }
.ci-coin span { font: 700 12px var(--sans); color: #5a4200; }
.ci-coin.in { transform: translate(-112px, 20px) scale(.4); opacity: 0; }
.ci-y2 { position: absolute; right: 0; top: 30px; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .5s; }
.ci-y2 > span { display: grid; place-items: center; border-radius: 50%; font: 900 15px var(--sans); }
.ci-c2 { width: 64px; height: 64px; color: #3a2800; background: radial-gradient(circle at 35% 35%, #FFE7A8, var(--gold) 55%, var(--gold-deep)); }
.ci-c3 { width: 44px; height: 44px; color: var(--mint-ink); background: var(--mint); box-shadow: 0 0 18px var(--mint); }
.ci-y2 em { position: absolute; top: -20px; left: 0; font: 700 12.5px var(--sans); font-style: normal; color: var(--dim); }
.ci-jarsc.y2 .ci-y2 { opacity: 1; }
.ci-jarsc { padding-top: 26px; }

/* Nia and Leo */
.ci-race { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ci-cols { display: flex; gap: 28px; align-items: flex-start; }
.ci-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; }
.ci-who { font: 800 15px var(--sans); color: var(--text); }
.ci-bar { height: 100px; width: 56px; display: flex; align-items: flex-end; border-bottom: 2px solid var(--line-strong); }
.ci-bar i { display: block; width: 100%; border-radius: 8px 8px 2px 2px; background: repeating-linear-gradient(180deg, var(--gold) 0 7px, var(--gold-deep) 7px 9px); box-shadow: 0 0 14px rgba(255,200,80,.25); transition: height .2s; }
.ci-col.leo .ci-bar i { background: repeating-linear-gradient(180deg, var(--violet-bright) 0 7px, var(--violet-deep) 7px 9px); }
.ci-log { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 92px; }
.ci-lr { display: flex; justify-content: space-between; font: 600 13px var(--sans); color: var(--dim); animation: ci-in .35s both; }
.ci-lr b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ci-lr.meet b { color: var(--mint); }
@media (max-height: 700px) { .ci-bar { height: 64px; } .ci-log { min-height: 84px; } .ci-lr { font-size: 12.5px; } }

/* which grows most */
.ci-three { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.ci-pot { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ci-pot img { grid-row: 1 / 4; width: 40px; height: 40px; object-fit: contain; }
.ci-pn { font: 700 13.5px var(--sans); color: var(--text); }
.ci-pot em { grid-column: 2; font: 600 12.5px var(--sans); font-style: normal; color: var(--dim); }
.ci-pot b { grid-column: 3; grid-row: 1 / 3; font: 800 17px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ci-pbar { grid-column: 2 / 4; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ci-pbar i { display: block; height: 100%; width: 13.7%; background: var(--gold); }
.ci-pot.c .ci-pbar i { background: var(--violet-bright); }
.ci-three.done .ci-pot.c { border-color: var(--violet-bright); }
.ci-three.done .ci-pot.c b { color: var(--violet-bright); }