:root {
  /* Typography */
  --el-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --el-font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --el-font-sans: "IBM Plex Sans", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --el-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale */
  --el-step--1: 0.72rem;
  --el-step-0: 0.86rem;
  --el-step-1: 1rem;
  --el-step-2: clamp(1.12rem, 1.4vw, 1.3rem);
  --el-step-3: clamp(1.44rem, 2.2vw, 2rem);
  --el-step-4: clamp(2.2rem, 5.8vw, 4.8rem);

  /* Spacing + shape */
  --el-radius-pill: 999px;
  --el-radius-card: 14px;
  --el-radius-panel: 18px;
  --el-space-2xs: 0.32rem;
  --el-space-xs: 0.5rem;
  --el-space-sm: 0.72rem;
  --el-space-md: 1rem;
  --el-space-lg: 1.4rem;

  /* Color system */
  --el-paper: #f8f2e8;
  --el-paper-2: #f2e9dc;
  --el-surface: rgba(255, 255, 255, 0.68);
  --el-surface-soft: rgba(255, 255, 255, 0.52);
  --el-ink: #18120d;
  --el-ink-soft: #5f564a;
  --el-line: rgba(34, 25, 14, 0.16);
  --el-accent: #c04c30;
  --el-accent-strong: #8d321f;
  --el-accent-soft: color-mix(in srgb, var(--el-accent), white 72%);
  --el-secondary: #2f6f9a;
  --el-secondary-soft: #dfeaf2;

  /* Elevation */
  --el-shadow-sm: 0 5px 14px rgba(30, 20, 10, 0.08);
  --el-shadow-md: 0 12px 28px rgba(30, 20, 10, 0.12);

  /* Motion */
  --el-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --el-ease-snap: cubic-bezier(0.3, 0.9, 0.2, 1);
  --el-dur-fast: 140ms;
  --el-dur-mid: 260ms;
  --el-dur-slow: 520ms;
}

.el-ui {
  font-family: var(--el-font-sans);
}

.el-kicker {
  font-family: var(--el-font-mono);
  font-size: var(--el-step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--el-ink-soft);
}

.el-title {
  font-family: var(--el-font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.el-body {
  font-family: var(--el-font-serif);
  font-size: var(--el-step-1);
  line-height: 1.65;
  color: color-mix(in srgb, var(--el-ink), white 18%);
}

.el-card {
  border: 1px solid var(--el-line);
  border-radius: var(--el-radius-card);
  background: var(--el-surface);
  box-shadow: var(--el-shadow-sm);
}

.el-panel {
  border: 1px solid color-mix(in srgb, var(--el-line), black 6%);
  border-radius: var(--el-radius-panel);
  background: linear-gradient(148deg, color-mix(in srgb, var(--el-paper), white 45%), var(--el-surface));
  box-shadow: var(--el-shadow-md);
}

.el-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  text-decoration: none;
  border-radius: var(--el-radius-pill);
  border: 1px solid color-mix(in srgb, var(--el-ink), white 72%);
  background: color-mix(in srgb, var(--el-paper), white 40%);
  color: color-mix(in srgb, var(--el-ink), white 20%);
  font-family: var(--el-font-mono);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 2.2rem;
  padding: 0.52rem 0.84rem;
  transition:
    background var(--el-dur-fast) var(--el-ease-standard),
    border-color var(--el-dur-fast) var(--el-ease-standard),
    color var(--el-dur-fast) var(--el-ease-standard),
    transform var(--el-dur-fast) var(--el-ease-snap);
}

.el-btn:hover,
.el-btn:focus-visible {
  border-color: color-mix(in srgb, var(--el-ink), white 46%);
  background: color-mix(in srgb, var(--el-paper), white 72%);
  color: var(--el-ink);
}

.el-btn:active {
  transform: translateY(1px);
}

.el-btn--primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--el-accent), white 8%), var(--el-accent-strong));
  color: #fff4e5;
  border-color: color-mix(in srgb, var(--el-accent-strong), black 8%);
}

.el-btn--primary:hover,
.el-btn--primary:focus-visible {
  background: linear-gradient(180deg, color-mix(in srgb, var(--el-accent), white 2%), color-mix(in srgb, var(--el-accent-strong), black 3%));
  color: #fff9f1;
}

.el-btn--ghost {
  background: rgba(255, 255, 255, 0.55);
}

.el-btn--micro {
  min-height: 1.7rem;
  font-size: 0.54rem;
  padding: 0.3rem 0.56rem;
}

.el-chip {
  border-radius: var(--el-radius-pill);
  border: 1px solid color-mix(in srgb, var(--el-line), black 6%);
  background: rgba(255, 255, 255, 0.72);
  color: color-mix(in srgb, var(--el-ink), white 22%);
  font-family: var(--el-font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  min-height: 2.05rem;
  padding: 0.42rem 0.68rem;
  transition:
    border-color var(--el-dur-fast) var(--el-ease-standard),
    background var(--el-dur-fast) var(--el-ease-standard),
    color var(--el-dur-fast) var(--el-ease-standard);
}

.el-chip:hover,
.el-chip:focus-visible {
  border-color: color-mix(in srgb, var(--el-ink), white 45%);
}

.el-chip.is-active,
.el-chip[aria-current="true"] {
  color: #fff6e8;
  background: linear-gradient(180deg, color-mix(in srgb, var(--el-accent), black 2%), color-mix(in srgb, var(--el-accent-strong), black 8%));
  border-color: color-mix(in srgb, var(--el-accent-strong), black 12%);
}

.el-step-card {
  position: relative;
  overflow: hidden;
}

.el-step-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--el-secondary), white 22%), color-mix(in srgb, var(--el-accent), white 8%));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--el-dur-mid) var(--el-ease-standard);
}

.el-step-card.is-active::before {
  transform: scaleX(1);
}

.el-fade-rise {
  opacity: 0;
  transform: translateY(12px);
  animation: el-fade-rise var(--el-dur-slow) var(--el-ease-standard) forwards;
}

.el-fade-rise--d1 { animation-delay: 60ms; }
.el-fade-rise--d2 { animation-delay: 140ms; }
.el-fade-rise--d3 { animation-delay: 220ms; }
.el-fade-rise--d4 { animation-delay: 300ms; }

@keyframes el-fade-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .el-fade-rise {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .el-btn,
  .el-chip,
  .el-step-card::before {
    transition-duration: 0.01ms !important;
  }
}