/* Loan: a bank statement, made honest. One bar per year shows how each year's payments split between paying off
   the loan (slate blue) and interest (amber); interest shrinks year after year. */
:root { --page: #eef0f4; --card: #ffffff; --ink: #161a22; --soft: #586070; --line: #d5d9e2; --field: #e7eaf0; --act: #2e4a7d; --on-act: #ffffff; --stop: #b3261e; --int: #d08a12; --wide: 680px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #111318; --card: #1a1d24; --ink: #e9ecf2; --soft: #a2aaba; --line: #2e333d; --field: #111318; --act: #9db8ec; --on-act: #0d1b33; --stop: #ff8a80; --int: #f0b24a; color-scheme: dark; }
}
.sum { gap: 4px; } .sum .big { color: var(--act); }
.legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.k { display: inline-block; width: 12px; height: 12px; border-radius: 2px; } .k.cap { background: var(--act); } .k.int { background: var(--int); margin-left: 10px; }
.years { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.years li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 15px; }
.years .bar { display: flex; height: 16px; border-radius: 3px; overflow: hidden; background: var(--field); }
.years .bar i { display: block; height: 100%; } .years .bar .c { background: var(--act); } .years .bar .n { background: var(--int); }
.years .left { color: var(--soft); text-align: right; white-space: nowrap; }