.loan{--loan-interest:#3442d9;--loan-capital:#7d88e8}.loan__form{align-items:start}@media (min-width:40rem){.loan__form{grid-template-columns:repeat(2,minmax(0,1fr))}.loan__modes,.loan__wide{grid-column:1/-1}}.loan__modes{display:flex}.loan__number{font-family:"Literata Variable", var(--font-sans);font-weight:600}.loan__wide .loan__number{min-block-size:3.25rem;font-family:"Literata Variable", var(--font-display);font-size:var(--text-xl);font-weight:500}.loan__duration{gap:var(--space-2);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.loan__input,.loan__summary{align-self:start}.loan__figures{grid-template-columns:1fr}.loan__figures dd{text-align:end}.loan__main dd{overflow-wrap:anywhere;color:var(--ink-3);transition:color var(--duration) var(--ease-out)}.loan__summary.is-solved .loan__main dd{color:var(--accent)}.loan__how{gap:var(--space-2);padding:0 var(--space-5) var(--space-5);display:grid}.loan__how-label{color:var(--ink-2);font-size:var(--text-sm);font-weight:600}.loan__formula{overflow-wrap:anywhere;color:var(--ink);font-size:var(--text-sm);unicode-bidi:plaintext}.loan__explain{color:var(--ink-3);font-size:var(--text-sm)}.loan__schedule{min-inline-size:0}@media (min-width:64rem){.loan__schedule{grid-column:1/-1}}.loan__legend{gap:var(--space-2) var(--space-5);padding:var(--space-2) var(--space-5) 0;color:var(--ink-2);font-size:var(--text-sm);flex-wrap:wrap;display:flex}.loan__key{block-size:.625rem;inline-size:.625rem;border-radius:2px;margin-inline-end:var(--space-2);display:inline-block}.loan__key--capital{background:var(--loan-capital)}.loan__key--interest{background:var(--loan-interest)}.loan__chart{min-block-size:240px;margin:var(--space-3) var(--space-5) 0;position:relative}.loan__svg{border-radius:var(--radius-sm);block-size:auto;max-inline-size:100%;display:block;overflow:visible}.loan__svg:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.loan__grid{stroke:var(--sheet-rule);stroke-width:1px}.loan__axis{stroke:var(--line-strong);stroke-width:1px}.loan__tick{fill:var(--ink-3);font-variant-numeric:tabular-nums;font-size:11px}.loan__hit{fill:#0000}.loan__seg{transition:opacity var(--duration-fast) var(--ease-out)}.loan__seg--capital{fill:var(--loan-capital)}.loan__seg--interest{fill:var(--loan-interest)}.loan__svg:has(.is-active) .loan__bar:not(.is-active) .loan__seg{opacity:.45}.loan__bar.is-active .loan__hit{fill:var(--accent-soft);opacity:.5}.loan__tooltip{z-index:2;gap:var(--space-1);white-space:nowrap;min-inline-size:14rem;padding:var(--space-2) var(--space-3);border:1px solid var(--sheet-border);border-radius:var(--radius);background:var(--sheet);box-shadow:var(--shadow-pop);font-size:var(--text-sm);pointer-events:none;display:grid;position:absolute;transform:translate(-50%)}.loan__tip-title{color:var(--ink-2);font-weight:600}.loan__tip-row{gap:var(--space-2);grid-template-columns:auto .75rem 1fr;align-items:center;display:grid}.loan__tip-row strong{font-family:"Literata Variable", var(--font-sans);font-weight:600}.loan__tip-row span:last-child{color:var(--ink-3)}.loan__tip-key{block-size:2px}.loan__tip-key--capital{background:var(--loan-capital)}.loan__tip-key--interest{background:var(--loan-interest)}.loan__table-title{padding-block-start:var(--space-5)}.loan__table-hint{padding:var(--space-1) var(--space-5) 0}.loan__table-wrap{max-block-size:28rem;margin:var(--space-3) var(--space-5) var(--space-4);border:1px solid var(--sheet-rule);border-radius:var(--radius);overflow:auto}.loan__table-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.loan__table{border-collapse:collapse;white-space:nowrap;inline-size:100%;font-size:.875rem}.loan__table th,.loan__table td{padding:var(--space-2) var(--space-3);border-block-end:1px solid var(--sheet-rule);text-align:end}.loan__table thead th{z-index:1;background:var(--paper);color:var(--ink-2);font-size:var(--text-sm);font-weight:600;position:sticky;inset-block-start:0}.loan__table tbody th{color:var(--ink-2);text-align:start;font-weight:500}.loan__table th:first-child{text-align:start}.loan__table td{font-family:"Literata Variable", var(--font-sans)}.loan__table td:last-child{font-weight:600}.loan__table:not(.has-insurance) .loan__col-ins{display:none}.loan__year th{padding-block:var(--space-1)}.loan__toggle{gap:var(--space-2);min-block-size:2rem;padding-inline:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;margin-inline-start:calc(-1 * var(--space-2));font-weight:600;display:inline-flex}.loan__toggle:hover{background:var(--hover)}.loan__toggle:focus-visible{outline:2px solid var(--focus);outline-offset:0}.loan__chevron{block-size:1rem;inline-size:1rem;color:var(--ink-3);transition:transform var(--duration) var(--ease-out);transform:rotate(-90deg)}.loan__toggle[aria-expanded=true] .loan__chevron{transform:rotate(0)}.loan__month>*{background:color-mix(in srgb, var(--paper) 60%, var(--sheet));color:var(--ink-2)}.loan__month th{font-size:var(--text-sm);padding-inline-start:var(--space-8)}@media (hover:none){.loan__toggle:hover{background:0 0}}@media (pointer:coarse){.loan__toggle{min-block-size:2.75rem}}[dir=rtl] .loan__chevron{transform:rotate(90deg)}[dir=rtl] .loan__toggle[aria-expanded=true] .loan__chevron{transform:rotate(0)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .loan{--loan-interest:#7a84f0;--loan-capital:#4a54c4}}:root[data-theme=dark] .loan{--loan-interest:#7a84f0;--loan-capital:#4a54c4}