@layer composition,utility,components;@layer composition{:root{--argentinian-blue: #5AA9E6;--aquamarine: #5DFDCB;--charcoal: #383F51;--turquoise: #36d7b7;--verdigris: #5FB0B7;--keppel: #5BC8AF;--gray: #F7F7F7}[data-theme=light],:root:not([data-theme=dark]){--pico-primary: #5AA9E6;--pico-primary-background: #6bb2e9;--pico-primary-underline: #4887b8;--pico-primary-hover: #4887b8;--pico-primary-hover-background: #36658a;--pico-primary-focus: #36658a;--pico-primary-inverse: #fff}}@layer composition{nav{list-style-type:none;display:flex;justify-content:end;padding:0;position:fixed;width:100%;height:2.25rem;border-bottom:4px solid var(--turquoise);background-color:#f7f7f7;z-index:1}nav a:hover,nav a.active{background-color:var(--turquoise);color:#fff}nav a{text-decoration:none;color:#000;font-size:1.5rem;padding:0 .5em}main{min-height:calc(100vh - 2.25rem);position:relative;padding-top:2.25rem}.section{margin:4rem 0}.home{min-height:calc(100vh - 2.25rem);width:100%;display:flex;flex-direction:column;justify-content:center}.home h1{text-align:center;font-family:Mochiy Pop One,sans-serif;font-weight:400;font-style:normal;font-size:calc(2.75rem + 10vw);background:linear-gradient(65deg,var(--argentinian-blue),var(--turquoise),var(--argentinian-blue));-webkit-background-clip:text;background-clip:text;color:transparent}.card{background-color:#fff;max-width:40rem;padding:2rem;box-shadow:#e5e5e5 2px 4px 20px 5px;border-radius:4px}.card p{font-size:1.2rem}.description{margin:0 auto}.link-button{border:none;background-color:transparent;font-size:1.5rem;width:100%}.link-button a{text-decoration:none;color:var(--turquoise)}.link-button a span{display:inline-block;transform:translate(-1px);transition:all .2s}.link-button:hover a span{transform:translate(2px)}.inline-button{height:2em;width:2em;color:var(--turquoise);border:.05em solid var(--turquoise);border-radius:100%;font-family:monospace;transition:all .2s ease-in-out,height .5s ease-out,width .5s ease-out;box-shadow:3px 3px #000000c7;background-color:#fff;display:inline-flex;align-items:center;justify-content:center}.inline-button:hover{transform:translateY(1px) translate(1px);box-shadow:2px 2px #000000c7}.inline-button:active{opacity:1;transform:translateY(2px) translate(2px);box-shadow:1px 1px #000000c7}footer{display:flex;justify-content:center;align-items:center;height:5vh;width:100%;background:linear-gradient(65deg,var(--turquoise),var(--argentinian-blue))}}@layer utility{.overflow{overflow:auto}.font-heading{font-family:Mochiy Pop One,sans-serif}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:3rem}.italic{font-style:italic}.text-gradiant{background:linear-gradient(65deg,var(--turquoise),var(--argentinian-blue)) 0 center;background-size:100% auto;background-clip:text;-webkit-background-clip:text;color:transparent}.m-0{margin:0}.mb-0{margin-bottom:0}.mb-2{margin-bottom:2rem}.p-0{padding:0}.font-bold{font-weight:700}.font-light{font-weight:lighter}.text-primary{color:var(--turquoise)}.text-dark{color:var(--charcoal)}}@layer components{.btn{display:inline-block;border:1px solid silver;background-color:#fff;border-radius:6px;padding:.5em;box-shadow:4px 4px #000000c7;transition:all .3s ease}.btn:hover{filter:brightness(.9);transform:translateY(1px) translate(1px);box-shadow:3px 3px #000000c7}.btn:active{transform:translateY(2px) translate(2px);box-shadow:2px 2px #000000c7}.btn-group{margin-bottom:1em}.btn-group .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0;z-index:0;position:relative}.btn-group .btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0;position:relative}}@layer composition{body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;background-color:#f7f7f7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}*{box-sizing:border-box}@layer components{.mortgage-schedule{min-width:max-content;display:grid;grid-auto-rows:auto;grid-auto-flow:row;grid-auto-columns:20%;grid-template-columns:5% repeat(5,19%);grid-template-rows:repeat(1,auto)}@supports not (interpolate-size: allow-keywords){.mortgage-schedule--table .sub-grid-wrapper{max-height:75vh;overflow:scroll}}@supports (interpolate-size: allow-keywords){.mortgage-schedule--table .sub-grid-wrapper{max-height:calc-size(max-content,size + 1px)}}.mortgage-schedule--tabs .tab-summary{grid-column:1 / -1;background-color:#fff;margin:0 0 .5em;border-radius:4px;display:none;padding:1em}.mortgage-schedule--tabs .tab-summary.active{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}.mortgage-schedule--tabs .tab-summary>div{display:flex;flex-direction:column}.mortgage-schedule-header{font-weight:bolder;background-color:#fff;border-top-left-radius:4px;border-top-right-radius:4px}.year-tab-wrapper{grid-column:1 / -1;display:flex;border-bottom:2px solid var(--turquoise)}.year-tab{cursor:pointer;padding:0 .5em;border:2px solid var(--turquoise);border-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;background-color:#fff;font-weight:bolder;transition:all .4s ease}.year-tab.active{background-color:var(--turquoise)}.year-tab:not(:first-child){margin-left:4px}.yearly-summary-header{cursor:pointer;background-color:var(--turquoise);font-weight:bolder;white-space:nowrap}.yearly-summary-header span:first-child{text-align:left;grid-column:1 / 3}.yearly-summary-header span:not(:first-child),.mortgage-schedule-row{font-family:monospace;margin:auto 0}.yearly-summary-header,.mortgage-schedule-row{padding:.5em}.mortgage-schedule-row span{white-space:nowrap}.mortgage-schedule-row:nth-child(2n){background-color:#fff}.sub-grid-wrapper{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;color:#000;overflow:hidden;opacity:1;transition:all .4s ease}.sub-grid-wrapper.collapsed{max-height:0;opacity:0}.sub-grid{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-auto-flow:column;text-align:right}.sub-grid span{padding:0 .5em 0 1em}}.output-summary{display:grid;grid-template-areas:"principal rate schedule" "payment payment payment";border-radius:4px;background-color:#fff;margin-bottom:2em;padding:1em}.principal-wrapper{grid-area:principal}.rate-wrapper{grid-area:rate}.schedule-wrapper{grid-area:schedule}.payment-wrapper{grid-area:payment}.summary-payment{font-size:2rem}@keyframes glide{to{background-position:200% center}}.output-waiting{font-size:1.5rem;font-weight:bolder;background:linear-gradient(65deg,var(--turquoise),var(--turquoise) 35%,white,var(--turquoise)) 0 center;background-size:200% auto;background-clip:text;-webkit-background-clip:text;color:transparent;animation:glide 3s ease infinite}@media (prefers-reduced-motion){.output-waiting{animation:none}}@layer components{.calculator-wrapper{display:grid;grid-template-rows:repeat(2,min-content);grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-auto-rows:min-content;justify-content:center}.calculator{margin:.5em;display:flex;flex-direction:column}.calculator>*:not(:last-child){margin-bottom:1.5em}.calculator-outputs{max-width:100%;align-self:center}.add-calculator{position:absolute;top:calc(2.25rem + 8px);right:8px;transition:all .5s ease-in-out;display:flex;flex-direction:column;align-items:center}.add-calculator button{height:1.5em;width:1.5em;border:.05em solid var(--turquoise);border-radius:100%;font-size:2rem;font-family:monospace;color:var(--turquoise);opacity:.5;transition:all .2s ease-in-out,height .5s ease-out,width .5s ease-out;box-shadow:3px 3px #000000c7;background-color:#fff;display:flex;align-items:center;justify-content:center}.add-calculator span{font-size:0;transition:all .5s ease-in-out}.add-calculator button:hover{opacity:1;transform:translateY(1px) translate(1px);box-shadow:2px 2px #000000c7}.add-calculator button:active{opacity:1;transform:translateY(2px) translate(2px);box-shadow:1px 1px #000000c7}.add-calculator[data-calculators=empty]{top:35%;right:42%}.add-calculator[data-calculators=empty] button{border-radius:2em;font-size:5rem;margin-bottom:.25em;width:100%}.add-calculator[data-calculators=empty] span{font-size:1.25rem}}@layer components{.calculator-remove{padding-bottom:2em}.calculator-inputs{max-width:400px;align-self:center;display:flex;flex-direction:column;background-color:#fff}.calculator-inputs label{display:flex;flex-direction:column;align-content:start}.calculator-inputs .input-wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-items:center}.calculator-inputs .input-wrapper>*{grid-column:1;grid-row:1}.calculator-inputs .icon-wrapper{display:flex}.calculator-inputs .icon-wrapper.end{justify-self:end;margin-right:.25em}.calculator-inputs .icon-wrapper.start{justify-self:start;margin-left:.25em}.calculator-inputs .input-icon{height:1.25em;width:1.25em}.calculator-inputs .form-label{margin-bottom:.25em}.calculator-inputs label .form-input{padding:.5em;border:1px solid silver;background-color:transparent;border-radius:6px;width:100%}.calculator-inputs label .form-input.start{padding-left:2em}.calculator-inputs label .form-input.end{padding-right:2em}.calculator-inputs label .form-input[aria-invalid=true]{border:1px solid red}.calculator-inputs label .form-input[aria-invalid=true]:focus{outline:1px solid red}.calculator-inputs label .form-input:focus{outline:2px solid var(--turquoise)}.calculator-inputs label .input-feedback{color:red}.calculator-inputs--group{padding:1em}.prepayment-options--header{padding:.25em 1em;background-color:var(--turquoise);cursor:pointer}.prepayment-options--inputs{opacity:1;max-height:50vh;transition:all .4s ease}.prepayment-options--inputs.collapsed{max-height:0;padding:0 1em;opacity:0}}.section.summary{display:grid;grid-template-rows:repeat(2,minmax(400px,min-content));grid-template-columns:repeat(auto-fill,minmax(350px,1fr));grid-auto-rows:400px;margin:2rem auto;max-width:80vw}.section.summary .card{margin:2rem}.section.summary .stats{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem}.principal-summary{position:relative;display:grid;grid-template-areas:"summary summary" "paid remaining";margin-bottom:1rem}.summary-bar.wrapper{grid-area:summary}.summary-bar{height:.5rem;width:100%;border-radius:2rem}.summary-bar.total{background-color:silver;position:absolute;z-index:0}.summary-bar.remaining{background-color:var(--argentinian-blue);position:relative;z-index:10;border-radius:0 2rem 2rem 0;margin:0 0 0 auto}.summary-bar.interest{background-color:var(--turquoise)}.label.principal,.label.interest{display:flex;flex-direction:column}.principal.remaining{grid-area:remaining;text-align:right}.principal.paid{grid-area:paid}