/* (unused) html {
  scroll-behavior: smooth;
}*/

canvas.svelte-2ogij5 {
  min-height: 300px;
}
@media (width <= 768px) {
  canvas.svelte-2ogij5 {
    min-height: 200px;
  }
}

.compound-interest-calculator-wrapper.svelte-2ogij5 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}

.flavor-text.svelte-2ogij5 {
  font-size: 24px;
  line-height: normal;
  font-weight: 500;
}

.result-section.svelte-2ogij5 {
  background-color: var(--neutral-warm-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0 3.75rem 0;
  position: relative;
  overflow: hidden;
}
@media (width <= 768px) {
  .result-section.svelte-2ogij5 {
    padding: 1rem;
  }
}
.result-section.svelte-2ogij5 .result-heading:where(.svelte-2ogij5) {
  color: var(--black);
  z-index: 5;
}
.result-section.svelte-2ogij5 .result-grid:where(.svelte-2ogij5) {
  display: grid;
  grid-template-columns: 8fr 4fr;
  align-items: start;
  row-gap: 0.5rem;
}
.result-section.svelte-2ogij5 .result-grid:where(.svelte-2ogij5) .result-name:where(.svelte-2ogij5) {
  grid-column: span 8;
}
.result-section.svelte-2ogij5 .result-grid:where(.svelte-2ogij5) .result-number:where(.svelte-2ogij5) {
  font-weight: 600;
  text-align: end;
  grid-column: span 4;
}
.result-section.svelte-2ogij5 .result-grid:where(.svelte-2ogij5) .result-divider:where(.svelte-2ogij5) {
  height: 1px;
  background-color: var(--neutral-warm-300);
  width: 100%;
  grid-column: span 12;
}
.result-section.svelte-2ogij5 .result-card:where(.svelte-2ogij5) {
  width: var(--content-width-xl);
  padding: 2rem;
  align-items: start;
  z-index: 5;
}
@media (width <= 1300px) {
  .result-section.svelte-2ogij5 .result-card:where(.svelte-2ogij5) {
    max-width: 1000px;
  }
}
@media (width <= 1000px) {
  .result-section.svelte-2ogij5 .result-card:where(.svelte-2ogij5) {
    width: 100%;
    padding: 1rem;
  }
}

.width-wrapper.svelte-2ogij5 {
  width: var(--content-width-xl);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (width <= 1300px) {
  .width-wrapper.svelte-2ogij5 {
    max-width: 1000px;
  }
}
@media (width <= 1000px) {
  .width-wrapper.svelte-2ogij5 {
    width: 100%;
    padding: 1rem;
  }
}

.explanation-banner.svelte-2ogij5 {
  background-color: var(--neutral-warm-100);
  padding: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  border-radius: 1rem;
}
@media (width <= 768px) {
  .explanation-banner.svelte-2ogij5 {
    padding: 1rem;
    border-radius: 0;
  }
}
.explanation-banner.svelte-2ogij5 .explanation-content:where(.svelte-2ogij5) {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (width <= 768px) {
  .explanation-banner.svelte-2ogij5 .explanation-content:where(.svelte-2ogij5) {
    width: 100%;
  }
}
.explanation-banner.svelte-2ogij5 .explanation-content:where(.svelte-2ogij5) .title:where(.svelte-2ogij5) {
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
}
/* (unused) .explanation-banner .explanation-content .section-title {
  font-weight: 600;
}*/
.explanation-banner.svelte-2ogij5 .explanation-content:where(.svelte-2ogij5) .step-number:where(.svelte-2ogij5) {
  font-family: "Huy Handschrift", "sans-serif";
  font-size: 3rem;
  line-height: normal;
  text-align: center;
  width: 48px;
  color: var(--primary-dark);
}
.explanation-banner.svelte-2ogij5 .explanation-content:where(.svelte-2ogij5) .step-heading:where(.svelte-2ogij5) {
  font-weight: 700;
}

.bottom-info-box.svelte-2ogij5 {
  width: 100%;
  background-color: var(--neutral-warm-100);
  padding: 2rem;
  flex: 1;
}