:root{
  --mf-bg: #ffffff;
  --mf-bg-soft: #f7f8fb;
  --mf-text: #111827;
  --mf-text-soft: #4b5563;
  --mf-border: #e5e7eb;
  --mf-primary: #2563eb;
  --mf-primary-soft: #dbeafe;
  --mf-radius: 18px;
  --mf-radius-sm: 12px;
  --mf-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  --mf-gap: 24px;
  --mf-gap-sm: 16px;
  --mf-container: 1200px;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

.mf-app{
  width: min(100%, var(--mf-container));
  margin: 0 auto;
  padding: 24px 16px 48px;
  color: var(--mf-text);
}

.mf-tool{
  width: 100%;
}

.mf-header{
  margin-bottom: 24px;
}

.mf-header-inner{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mf-page-title{
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  color: var(--mf-text);
}

.mf-page-excerpt{
  color: var(--mf-text-soft);
  font-size: 17px;
  line-height: 1.65;
}

.mf-page-excerpt > *:first-child{
  margin-top: 0;
}

.mf-page-excerpt > *:last-child{
  margin-bottom: 0;
}

.mf-entry-content{
  color: var(--mf-text);
  line-height: 1.75;
}

.mf-entry-content > *:first-child{
  margin-top: 0;
}

.mf-entry-content > *:last-child{
  margin-bottom: 0;
}

.mf-entry-content h2,
.mf-entry-content h3,
.mf-entry-content h4{
  color: var(--mf-text);
  line-height: 1.2;
}

.mf-entry-content p,
.mf-entry-content ul,
.mf-entry-content ol{
  color: var(--mf-text-soft);
}

.mf-digit{
  display: inline-block;
}

.mf-digit.is-changed{
  animation: mfDigitFlash .35s ease;
}

@keyframes mfDigitFlash{
  0%{
    transform: translateY(-2px);
    opacity: .35;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}