:root{font-family:"        Alan Sans",sans-serif;line-height:1.5;font-weight:400;font-style:normal;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:#1d2d44;color:#fff;font-family:Unna,serif;line-height:1.6}#root{margin:1rem auto;padding:2rem;text-align:center;padding-top:0%}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}@media(max-width:768px){#root{margin:0 auto}}.card{padding:2em}.read-the-docs{color:#888}.navbar{width:100%;position:sticky}.navbar-container{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.navbar-logo{display:flex;align-items:center;text-decoration:none;transition:opacity .2s ease}.navbar-logo:hover{opacity:.8}.logo-image{height:50px;width:auto;display:block}.navbar-link{color:#f2f2f2;text-decoration:none;font-size:1rem;font-weight:500;padding:.5rem 1rem;border-radius:6px;transition:all .2s ease}.navbar-link:hover{color:#bfbfbf}@media(max-width:768px){.navbar{padding-top:10%}.navbar-container{padding:.75rem 1rem}.navbar-link{padding:.375rem .75rem}}.home-container{background-color:#1d2d44;min-height:100vh;color:#fff}.hero{padding:6rem 2rem;max-width:2400px;margin:0 auto;position:relative;padding-bottom:10%}.hero-content{display:flex;align-items:center;justify-content:center;position:relative}.decorative-element{flex-shrink:0}.decorative-element.left{width:250px;margin-right:2rem}.decorative-element.right{width:300px;margin-left:2rem}.piggy-bank,.calendar{color:#fff;opacity:.9}.hero-text{text-align:center;max-width:600px;position:relative}.sparkle{position:absolute;font-size:1.5rem;color:#90ee90;animation:twinkle 2s ease-in-out infinite}.sparkle-1{top:-20px;right:80px}.sparkle-2{top:20px;right:-20px}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}h1{font-size:3.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;color:#fff}.hero-subtitle{font-size:1rem;line-height:1.6;color:#b3b3b3;margin-bottom:2rem}.hero-buttons{display:flex;gap:1rem;justify-content:center}.btn-primary{padding:.875rem 2rem;font-size:1rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;background-color:#57a054;color:#f2f2f2;transition:all .3s;box-shadow:0 2px 2px #00000012,0 4px 4px #00000026}.methods-section{color:#f2f2f2;padding:5rem 2rem;border-top:1px solid #4d5e74}.methods-section h2{text-align:center;font-size:2.5rem;font-weight:700;margin-bottom:3rem;color:#f2f2f2}.method-cards{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:2rem}.method-card{padding:2.5rem;width:60%}.method-card#avalanche-method{margin-right:auto;margin-left:0}.method-card#snowball-method{margin-left:auto;margin-right:0}.method-icon{font-size:3rem;margin-bottom:1rem}.method-card h3{font-size:1.75rem;font-weight:700;margin-bottom:1.25rem;color:#e6e6e6}.method-card p{font-size:1.05rem;line-height:1.7;color:#b3b3b3;margin-bottom:1rem}.method-benefit{margin-top:1.5rem;padding:.75rem 1rem;background-color:#90ee90;color:#1d2d44;border-radius:8px;font-weight:600;text-align:center;font-size:.95rem}#avalanche-method{border-left:2px solid #5a9}#snowball-method{border-right:2px solid #5a9}@media(max-width:968px){.hero-content{flex-direction:column}.decorative-element.left,.decorative-element.right{width:200px;margin:2rem 0}h1{font-size:2.5rem}.method-card{width:100%;margin-left:0!important;margin-right:0!important}}@media(max-width:640px){.hero{padding:3rem 1rem}h1{font-size:2rem}.subtitle{font-size:1.1rem}.hero-buttons{flex-direction:column}.btn-primary,.btn-secondary{width:100%}.decorative-element.left,.decorative-element.right{width:150px}.nav-links{gap:1rem}.methods-section{padding:3rem 1rem}.methods-section h2{font-size:1.75rem;margin-bottom:2rem}.method-cards{gap:1.5rem;max-width:100%}.method-card{width:100%;padding:1.5rem;font-size:.95rem}.method-card#avalanche-method,.method-card#snowball-method{margin:0!important}.method-card h3{font-size:1.3rem;margin-bottom:1rem}.method-card p{font-size:.95rem;margin-bottom:.75rem}.method-icon{font-size:2rem;margin-bottom:.75rem}}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#1d2d44;color:#f2f2f2;font-family:Alan Sans,sans-serif;line-height:1.6}.debt-tool-container{margin:0 auto;padding:40px 20px}.header{text-align:center;margin-bottom:20px}.header h1{font-size:2.5rem;font-weight:700;margin-bottom:15px;color:#f2f2f2}.debt-payoff-grid{display:grid;grid-template-columns:60% 40%;gap:2rem;align-items:start;width:100%;max-width:1400px;margin:0 auto;padding:2rem;box-sizing:border-box}.subtitle{font-size:1rem;color:#b3b3b3;font-style:italic;text-align:center;max-width:900px;margin:0 auto}.input-section{background:linear-gradient(0deg,#253956 95%,#2c4568);border:solid 1px hsl(215,40%,32%);padding:30px;border-radius:12px;margin-bottom:40px;box-shadow:0 2px 2px #00000012,0 4px 4px #00000026}.input-section h2{font-size:1.8rem;margin-bottom:25px;color:#f2f2f2}.right-column{display:grid;grid-template-rows:auto auto auto;gap:1.5rem}.debt-card{padding:25px;margin-bottom:20px;border-top:1px solid #4d5e74}.debt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.debt-header h3{font-size:1.3rem;color:#f2f2f2}.remove-btn{background-color:#a23728;color:#f2f2f2;border:none;padding:8px 16px;border-radius:5px;cursor:pointer;font-family:Alan Sans,sans-serif;font-size:.95rem;transition:background-color .3s}.debt-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.input-group{display:flex;flex-direction:column}.input-group label{font-size:.95rem;margin-bottom:8px;color:#b3b3b3;font-weight:400}.input-group input{padding:12px;border:1px solid hsl(215,40%,29%);border-radius:5px;background-color:#2c4568;color:#f2f2f2;font-family:Alan Sans,sans-serif;font-size:1rem;transition:border-color .3s}.input-group input:focus{outline:none;border-color:#7d8ea4}.input-group input::placeholder{color:#8d9eae}.add-debt-btn{background-color:#2c4568;color:#f2f2f2;border:2px dashed hsl(0,0%,95%);padding:15px 30px;border-radius:8px;cursor:pointer;font-family:Alan Sans,sans-serif;font-size:1.1rem;width:100%;margin-top:10px;transition:all .3s}.add-debt-btn:hover{background-color:#345179}.extra-payment-section{margin-top:30px;padding-top:30px;border-top:1px solid #4d5e74;text-align:left}.extra-payment-section h3{font-size:1.3rem;color:#f2f2f2}.input-group-extra input{padding:12px;border:1px solid hsl(215,40%,29%);border-radius:5px;background-color:#2c4568;color:#f2f2f2;font-family:Alan Sans,sans-serif;font-size:1rem;transition:border-color .3s;margin-left:20px}.error-message{color:#f79b8f;font-size:.95rem;text-align:center;opacity:0;animation:fadeInOut 10s ease-in-out forwards}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-4px)}5%{opacity:1;transform:translateY(0)}90%{opacity:1}to{opacity:0;transform:translateY(-4px)}}.calculate-btn{background-color:#57a054;color:#f2f2f2;border:none;padding:18px 40px;border-radius:8px;cursor:pointer;font-family:Alan Sans,sans-serif;font-size:1.2rem;font-weight:700;margin-top:30px;margin-left:50%;transition:background-color .3s;box-shadow:0 2px 2px #00000012,0 4px 4px #00000026}.calculate-btn:hover{background-color:#5baf58}.results-section h2{font-size:2rem;text-align:center;margin-bottom:30px;color:#f2f2f2}.comparison-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px;justify-content:center}.result-card{border:2px solid transparent;transition:transform .3s;width:100%;max-width:320px;margin:0 auto;background:linear-gradient(0deg,#253956 95%,#2c4568);border:solid 1px hsl(215,40%,32%);padding:30px;border-radius:12px;box-shadow:0 2px 2px #00000012,0 4px 4px #00000026}.result-card h3{font-size:1.2rem;margin-bottom:8px;color:#f2f2f2}.method-description{font-size:.85rem;color:#b3b3b3;font-style:italic;margin-bottom:15px}.result-stats{display:flex;flex-direction:column;gap:12px}.stat{display:flex;flex-direction:column;padding-bottom:12px;border-bottom:1px solid #4d5e74}.stat:last-child{border-bottom:none;padding-bottom:0}.stat-label{font-size:.8rem;color:#b0b0b0;margin-bottom:3px}.stat-value{font-size:1.1rem;font-weight:700;color:#f2f2f2}.savings-comparison{background:linear-gradient(0deg,#253956 95%,#2c4568);padding:5px;border-radius:8px;text-align:center;border-left:3px solid #5a9}.recommendation{font-size:.8rem;color:#bfbfbf;line-height:1.6}.recommendation strong{color:#8fbc8f}.custom-section{display:grid;grid-template-columns:60% 40%;gap:2%;align-items:start}.custom-order-section{background:linear-gradient(0deg,#253956 95%,#2c4568);padding:30px;border-radius:12px;margin:0;border:solid 1px hsl(215,40%,32%);box-shadow:0 2px 2px #00000012,0 4px 4px #00000026}.custom-order-header{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:15px}.custom-order-section h2{font-size:1rem;color:#f2f2f2;margin:0}.result-card.custom{margin:0;height:fit-content;position:sticky;top:20px}.custom-order-description{text-align:center;font-size:.8rem;color:#b3b3b3;margin-bottom:15px;font-style:italic}.custom-order-help-text{text-align:center;font-size:.65rem;color:#b3b3b3}.preset-buttons{display:flex;align-items:center}.preset-btn{background:#253956;color:#f2f2f2;border:solid 1px hsl(215,40%,32%);padding:8px;border-radius:6px;cursor:pointer;font-family:Alan Sans,sans-serif;font-size:1.2rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .3s}.preset-btn:hover{background-color:#2f4a6f}.drag-container{max-width:800px;margin:0 auto}.drag-instructions{background-color:#3d4e64;padding:15px;border-radius:8px;margin-bottom:20px;text-align:center;border:2px dashed #5d6e84}.drag-instructions p{margin:0;color:#e0e0e0;font-size:1rem}.drag-item{border:1px solid hsl(215,40%,29%);background-color:#2c4568;border-radius:8px;padding:10px;margin-bottom:12px;display:flex;align-items:center;gap:15px;cursor:pointer;transition:all .2s;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}.drag-item:hover{background-color:#2f4a6f;transform:translate(5px)}.drag-item.dragging{opacity:.5;transform:scale(.98)}.drag-handle{font-size:1.5rem;color:#8d9eae;cursor:grab;padding:0 5px;letter-spacing:-2px}.drag-item:active .drag-handle{cursor:grabbing}.drag-content{display:flex;align-items:center;gap:20px;flex:1}.drag-order{background-color:#5a9;color:#fff;font-weight:700;font-size:1.2rem;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-info{flex:1}.drag-name{font-size:1rem;font-weight:700;color:#fff;margin-bottom:5px}.drag-details{font-size:.8rem;color:#b0b0b0}.education-section{margin-top:50px;max-width:1200px;margin-left:auto;margin-right:auto}.education-section h3{font-size:1.8rem;margin-bottom:25px;text-align:center;color:#f2f2f2}.education-cards{display:grid;grid-template-columns:repeat(auto-fit,380px);gap:20%;justify-content:center}.education-card{width:100%;padding:25px;border-radius:8px;border-left:2px solid #5a9}.education-card h4{font-size:1.4rem;margin-bottom:15px;color:#bfbfbf}.education-card p{margin-bottom:12px;color:#999;font-size:1rem}.education-card p strong{color:#b3b3b3}@media(max-width:1280px){.drag-order{width:30px;height:30px}}@media(max-width:768px){.debt-payoff-grid{display:block;padding:0rem}.header h1{font-size:2rem}.subtitle{font-size:1rem}.debt-inputs,.comparison-cards,.education-cards{grid-template-columns:1fr}.custom-section{display:flex;flex-direction:column;gap:20px}.custom-order-section,.result-card.custom{width:100%}.result-card.custom{position:static}.input-group-extra input{margin-top:20px}.calculate-btn{margin-left:auto}.drag-order{width:50px;height:50px}.education-section{padding-bottom:40%}}.footer{text-align:center;margin-top:60px;padding-top:30px;border-top:1px solid #4d5e74;display:flex;justify-content:space-between;align-items:center}.footer p{font-size:.7rem;color:gray;font-style:italic}
