:root {
  --echo-border-radius-0: 0;
  --echo-border-radius-100: 0.125rem;
  --echo-border-radius-200: 0.25rem;
  --echo-border-radius-300: 0.5rem;
  --echo-border-radius-400: 1rem;
  --echo-border-radius-500: 1.5rem;
  --echo-border-radius-600: 2rem;
  --echo-border-radius-700: 3rem;
  --echo-border-radius-800: 3.5rem;
  --echo-border-radius-900: 56.25rem;
  --echo-color-brand-50: #eeedfe;
  --echo-color-brand-100: #dddbf7;
  --echo-color-brand-200: #c1bbee;
  --echo-color-brand-300: #a89de6;
  --echo-color-brand-400: #8c7ed7;
  --echo-color-brand-500: #735ccc;
  --echo-color-brand-600: #593ab1;
  --echo-color-brand-700: #461e96;
  --echo-color-brand-800: #351b7a;
  --echo-color-brand-900: #211359;
  --echo-color-neutral-0: #ffffff;
  --echo-color-neutral-50: #f5f5f5;
  --echo-color-neutral-100: #e8e8e8;
  --echo-color-neutral-200: #cacaca;
  --echo-color-neutral-300: #a3a3a3;
  --echo-color-neutral-400: #8a8a8a;
  --echo-color-neutral-500: #6e6e6e;
  --echo-color-neutral-600: #525252;
  --echo-color-neutral-700: #3b3b3b;
  --echo-color-neutral-800: #292929;
  --echo-color-neutral-900: #1e1e1e;
  --echo-color-info-0: #ffffff;
  --echo-color-info-50: #e7f7ff;
  --echo-color-info-100: #b7e8fe;
  --echo-color-info-200: #80deff;
  --echo-color-info-300: #00b4e6;
  --echo-color-info-400: #0391d7;
  --echo-color-info-500: #0073be;
  --echo-color-info-600: #005c98;
  --echo-color-info-700: #043e67;
  --echo-color-info-800: #0a3150;
  --echo-color-info-900: #062239;
  --echo-color-danger-50: #feefeb;
  --echo-color-danger-100: #fcd9d1;
  --echo-color-danger-200: #fdac9a;
  --echo-color-danger-300: #f8866d;
  --echo-color-danger-400: #f35439;
  --echo-color-danger-500: #e22f00;
  --echo-color-danger-600: #9e2305;
  --echo-color-danger-700: #761701;
  --echo-color-danger-800: #5d1602;
  --echo-color-danger-900: #420f03;
  --echo-color-success-50: #d8fee7;
  --echo-color-success-100: #8af6bb;
  --echo-color-success-200: #00dc8c;
  --echo-color-success-300: #06c07a;
  --echo-color-success-400: #119d63;
  --echo-color-success-500: #007f50;
  --echo-color-success-600: #095f3b;
  --echo-color-success-700: #09442a;
  --echo-color-success-800: #0c3722;
  --echo-color-success-900: #0b2517;
  --echo-color-warning-50: #fffcdb;
  --echo-color-warning-100: #fff8ba;
  --echo-color-warning-200: #fbf175;
  --echo-color-warning-300: #faeb1e;
  --echo-color-warning-400: #fbe12a;
  --echo-color-warning-500: #fbc618;
  --echo-color-warning-600: #ffa400;
  --echo-color-warning-700: #dd7005;
  --echo-color-warning-800: #c2551f;
  --echo-color-warning-900: #a04223;
  --echo-size-0: 0;
  --echo-size-10: 0.0625rem;
  --echo-size-25: 0.125rem;
  --echo-size-40: 0.1875rem;
  --echo-size-50: 0.25rem;
  --echo-size-65: 0.3125rem;
  --echo-size-75: 0.375rem;
  --echo-size-85: 0.4375rem;
  --echo-size-100: 0.5rem;
  --echo-size-115: 0.5625rem;
  --echo-size-125: 0.625rem;
  --echo-size-130: 0.6875rem;
  --echo-size-150: 0.75rem;
  --echo-size-160: 0.8125rem;
  --echo-size-175: 0.875rem;
  --echo-size-200: 1rem;
  --echo-size-225: 1.125rem;
  --echo-size-250: 1.25rem;
  --echo-size-300: 1.5rem;
  --echo-size-350: 1.75rem;
  --echo-size-400: 2rem;
  --echo-size-450: 2.25rem;
  --echo-size-500: 2.5rem;
  --echo-size-550: 2.75rem;
  --echo-size-600: 3rem;
  --echo-size-700: 3.5rem;
  --echo-size-800: 4rem;
  --echo-size-900: 4.5rem;
  --echo-size-1000: 5rem;
  --echo-size-1200: 6rem;
  --echo-size-1600: 8rem;
  --echo-size-1700: 8.5rem;
  --echo-size-2000: 10rem;
  --echo-size-2400: 12rem;
  --echo-size-2600: 13rem;
  --echo-size-3400: 17rem;
  --echo-size-3600: 18rem;
  --echo-size-4600: 23rem;
  --echo-size-5000: 25rem;
  --echo-size-6000: 30rem;

  --text-color: var(--echo-color-neutral-900);
  --text-color-muted: var(--echo-color-neutral-600);
  --surface-0-background-color: var(--echo-color-neutral-0);
  --surface-1-background-color: var(--echo-color-neutral-50);
  --surface-2-background-color: var(--echo-color-neutral-100);
  --icon-success-color: var(--echo-color-success-500);
  --icon-error-color: var(--echo-color-danger-500);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: var(--echo-color-neutral-0);
    --text-color-muted: var(--echo-color-neutral-200);
    --surface-0-background-color: var(--echo-color-neutral-800);
    --surface-1-background-color: var(--echo-color-neutral-700);
    --surface-2-background-color: var(--echo-color-neutral-600);
    --icon-success-color: var(--echo-color-success-200);
    --icon-error-color: var(--echo-color-danger-300);
  }
}

html, body {
  background-color: var(--surface-0-background-color);
  font-family: sans-serif;
  color: var(--text-color);
  margin: 0;
  line-height: 1;
  height: -webkit-fill-available;
  letter-spacing: 0.25px;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  margin: var(--echo-size-200);
  display: flex;
  justify-content: center;
  align-items: center;
}

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

p {
  line-height: 1.4;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  max-width: 550px;
  gap: var(--echo-size-400);
  background-color: var(--surface-1-background-color);
  padding: var(--echo-size-300);
  border-radius: var(--echo-border-radius-300);
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--echo-size-100);
  text-align: center;
}

.heading {
  font-weight: 500;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.icon {
  width: var(--echo-size-600);
  height: var(--echo-size-600);
}

.icon--success {
  color: var(--icon-success-color);
}

.icon--error {
  color: var(--icon-error-color);
}

.description {
  margin-top: var(--echo-size-200);
}

.footer {
  font-weight: 300;
  color: var(--text-color-muted);
  font-size: 0.8125rem;
  text-align: center;
}