diff --git a/hackclub-spotify-bot/src/public/hackclub.css b/hackclub-spotify-bot/src/public/hackclub.css
index fb4c884..feb83cb 100644
--- a/hackclub-spotify-bot/src/public/hackclub.css
+++ b/hackclub-spotify-bot/src/public/hackclub.css
@@ -1,625 +1,635 @@
-/* modified version of https://css.hackclub.com/theme.css  */
-:root {
-    /* why are the css vars swapped with incorrect names? well im to lazy to fix it. */
-    --darker: #121217;
-    --dark: #f9fafc;
-    --darkless: #e0e6ed;
-    --black: #fff;
-    --steel: #273444;
-    --slate: #3c4858;
-    --muted: #8492a6;
-    --smoke: #252429;
-    --snow:  #17171d;
-    --white: #1f2d3d;
-    --red: #ec3750;
-    --orange: #ff8c37;
-    --yellow: #f1c40f;
-    --green: #33d6a6;
-    --cyan: #5bc0de;
-    --blue: #338eda;
-    --purple: #a633d6;
-    --text: var(--black);
-    --background: var(--white);
-    --elevated: var(--white);
-    --sheet: var(--snow);
-    --sunken: var(--smoke);
-    --border: var(--smoke);
-    --primary: #ec3750;
-    --secondary: #8492a6;
-    --accent: #5bc0de;
-    --twitter: #1da1f2;
-    --facebook: #3b5998;
-    --instagram: #e1306c;
-    --breakpoint-xs: 32em;
-    --breakpoint-s: 48em;
-    --breakpoint-m: 64em;
-    --breakpoint-l: 96em;
-    --breakpoint-xl: 128em;
-    --spacing-0: 0px;
-    --spacing-1: 4px;
-    --spacing-2: 8px;
-    --spacing-3: 16px;
-    --spacing-4: 32px;
-    --spacing-5: 64px;
-    --spacing-6: 128px;
-    --spacing-7: 256px;
-    --spacing-8: 512px;
-    --font-1: 12px;
-    --font-2: 16px;
-    --font-3: 20px;
-    --font-4: 24px;
-    --font-5: 32px;
-    --font-6: 48px;
-    --font-7: 64px;
-    --font-8: 96px;
-    --font-9: 128px;
-    --font-10: 160px;
-    --font-11: 192px;
-    --line-height-limit: 0.875;
-    --line-height-title: 1;
-    --line-height-heading: 1.125;
-    --line-height-subheading: 1.25;
-    --line-height-caption: 1.375;
-    --line-height-body: 1.5;
-    --font-weight-body: 400;
-    --font-weight-bold: 700;
-    --font-weight-heading: var(--font-weight-bold);
-    --letter-spacing-title: -0.009em;
-    --letter-spacing-headline: 0.009em;
-    --size-wide-plus: 2048px;
-    --size-wide: 1536px;
-    --size-layout-plus: 1200px;
-    --size-layout: 1024px;
-    --size-copy-ultra: 980px;
-    --size-copy-plus: 768px;
-    --size-copy: 680px;
-    --size-narrow-plus: 600px;
-    --size-narrow: 512px;
-    --radii-small: 4px;
-    --radii-default: 8px;
-    --radii-extra: 12px;
-    --radii-ultra: 16px;
-    --radii-circle: 99999px;
-    --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.125);
-    --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.0625),
-      0 2px 4px rgba(0, 0, 0, 0.0625);
-    --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.125);
-    --shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.0625),
-      0 8px 12px rgba(0, 0, 0, 0.125);
-  }
-  
-  body {
-    font-family: "Phantom Sans", system-ui, -apple-system, BlinkMacSystemFont,
-      "Segoe UI", Roboto, sans-serif;
-    line-height: var(--line-height-body);
-    font-weight: var(--font-weight-body);
-    margin: 0;
-    min-height: 100vh;
-    text-rendering: optimizeLegibility;
-    font-smooth: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    color: var(--text);
-    background-color: var(--background);
-    box-sizing: border-box;
-  }
-  
-  * {
-    box-sizing: border-box;
-  }
-  
-  .monospace {
-    font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
-  }
-  
-  .heading {
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  
-  .ultratitle {
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-limit);
-    letter-spacing: var(--letter-spacing-title);
-  }
-  
-  .title {
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-title);
-    letter-spacing: var(--letter-spacing-title);
-  }
-  
-  .subtitle {
-    margin-top: var(--spacing-3);
-    font-weight: var(--font-weight-body);
-    line-height: var(--line-height-subheading);
-    letter-spacing: var(--letter-spacing-headline);
-  }
-  
-  .headline {
-    margin-top: var(--spacing-3);
-    margin-bottom: var(--spacing-3);
-    font-size: var(--font-4);
-    line-height: var(--line-height-heading);
-    letter-spacing: var(--letter-spacing-headline);
-  }
-  
-  .subheadline {
-    margin-top: var(--spacing-0);
-    margin-bottom: var(--spacing-3);
-    font-size: var(--font-2);
-    line-height: var(--line-height-heading);
-    letter-spacing: var(--letter-spacing-headline);
-  }
-  
-  .eyebrow {
-    color: var(--muted);
-    font-weight: var(--font-weight-heading);
-    letter-spacing: var(--letter-spacing-headline);
-    line-height: var(--line-height-subheading);
-    text-transform: uppercase;
-    margin-top: var(--spacing-0);
-    margin-bottom: var(--spacing-2);
-  }
-  
-  .lead {
-    font-weight: var(--font-weight-body);
-  }
-  
-  .caption {
-    color: var(--muted);
-    font-weight: var(--font-weight-body);
-    letter-spacing: var(--letter-spacing-headline);
-    line-height: var(--line-height-caption);
-  }
-  
-  .pill {
-    border-radius: var(--radii-circle);
-    padding-left: var(--spacing-3);
-    padding-right: var(--spacing-3);
-    padding-top: var(--spacing-1);
-    padding-bottom: var(--spacing-1);
-    font-size: var(--font-2);
-    background: var(--primary);
-    color: var(--background);
-    font-weight: var(--font-weight-bold);
-  }
-  
-  .outline-badge {
-    border-radius: var(--radii-circle);
-    padding-left: var(--spacing-3);
-    padding-right: var(--spacing-3);
-    padding-top: var(--spacing-1);
-    padding-bottom: var(--spacing-1);
-    font-size: var(--font-2);
-    background: none;
-    color: var(--muted);
-    border: 1px solid currentcolor;
-    font-weight: var(--font-weight-body);
-  }
-  
-  button {
-    cursor: pointer;
-    font-family: inherit;
-    font-weight: var(--font-weight-bold);
-    border-radius: var(--radii-circle);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: var(--shadow-card);
-    letter-spacing: var(--letter-spacing-headline);
-    -webkit-tap-highlight-color: transparent;
-    transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out;
-    box-sizing: border-box;
-    margin: 0;
-    min-width: 0;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    text-align: center;
-    line-height: inherit;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    color: var(--theme-ui-colors-white, #ffffff);
-    background-color: var(--theme-ui-colors-primary, #ec3750);
-    border: 0;
-    font-size: var(--font-2);
-  }
-  
-  button:focus,
-  button:hover {
-    box-shadow: var(--shadow-elevated);
-    transform: scale(1.0625);
-  }
-  .button {
-    cursor: pointer;
-    font-family: inherit;
-    font-weight: var(--font-weight-bold);
-    border-radius: var(--radii-circle);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: var(--shadow-card);
-    letter-spacing: var(--letter-spacing-headline);
-    -webkit-tap-highlight-color: transparent;
-    transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out;
-    box-sizing: border-box;
-    margin: 0;
-    min-width: 0;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    text-align: center;
-    line-height: inherit;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    color: var(--theme-ui-colors-white, #ffffff);
-    background-color: var(--theme-ui-colors-primary, #ec3750);
-    border: 0;
-    font-size: var(--font-2);
-  }
-  
-  .button:focus,
-  .button:hover {
-    box-shadow: var(--shadow-elevated);
-    transform: scale(1.0625);
-  }
-  button.lg {
-    font-size: var(--font-3)!important;
-    line-height: var(--line-height-title);
-    padding-left: var(--spacing-4);
-    padding-right: var(--spacing-4);
-    padding-top: var(--spacing-3);
-    padding-bottom: var(--spacing-3);
-  }
-  
-  button.outline {
-    background: none;
-    color: var(--primary);
-    border: 2px solid currentcolor;
-  }
-  
-  button.cta {
-    font-size: var(--font-2);
-    background-image: radial-gradient(
-      ellipse farthest-corner at top left,
-      var(--orange),
-      var(--red)
-    );
-  }
-  
-  .card {
-    background: var(--elevated);
-    color: var(--text);
-    border-radius: var(--radii-extra);
-    box-shadow: var(--shadow-card);
-    overflow: hidden;
-  }
-  
-  .card.sunken {
-    background: var(--sunken);
-    box-shadow: none;
-  }
-  
-  .card.interactive {
-    text-decoration: none;
-    -webkit-tap-highlight-color: transparent;
-    transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out;
-  }
-  
-  .card.interactive:hover,
-  .card.interactive:focus {
-    transform: scale(1.0625);
-    box-shadow: var(--shadow-elevated);
-  }
-  
-  input,
-  textarea,
-  select {
-    background: var(--elevated);
-    color: var(--text);
-    font-family: inherit;
-    border-radius: var(--radii-small);
-    border: 0;
-    font-size: inherit;
-    padding: var(--spacing-2);
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-  }
-  
-  input::-webkit-input-placeholder,
-  input::-moz-placeholder,
-  input:-ms-input-placeholder,
-  textarea::-webkit-input-placeholder,
-  textarea::-moz-placeholder,
-  textarea:-ms-input-placeholder,
-  select::-webkit-input-placeholder,
-  select::-moz-placeholder,
-  select:-ms-input-placeholder {
-    color: var(--muted);
-  }
-  
-  input[type="search"]::-webkit-search-decoration,
-  textarea[type="search"]::-webkit-search-decoration,
-  select[type="search"]::-webkit-search-decoration {
-    display: none;
-  }
-  
-  input[type="checkbox"] {
-    -webkit-appearance: checkbox;
-    -moz-appearance: checkbox;
-    appearance: checkbox;
-  }
-  
-  label {
-    color: var(--text);
-    display: flex;
-    flex-direction: column;
-    text-align: left;
-    line-height: var(--line-height-caption);
-    font-size: var(--font-3);
-  }
-  
-  label.horizontal {
-    display: flex;
-  }
-  
-  .slider {
-    color: var(--primary);
-  }
-  
-  .form-hidden {
-    position: absolute;
-    height: 1px;
-    width: 1px;
-    clip: rect(1px, 1px, 1px, 1px);
-    white-space: nowrap;
-  }
-  
-  .container {
-    width: 100%;
-    margin: auto;
-    padding-left: var(--spacing-3);
-    padding-right: var(--spacing-3);
-  }
-  
-  h1 {
-    font-size: var(--font-5);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  
-  h2 {
-    font-size: var(--font-4);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  
-  h3 {
-    font-size: var(--font-3);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  
-  h4 {
-    font-size: var(--font-2);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  
-  h5 {
-    font-size: var(--font-1);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  
-  h6 {
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  
-  p {
-    color: var(--text);
-    font-weight: var(--font-weight-body);
-    line-height: var(--line-height-body);
-    margin-top: var(--spacing-3);
-    margin-bottom: var(--spacing-3);
-  }
-  
-  img {
-    max-width: 100%;
-  }
-  
-  hr {
-    border: 0;
-    border-bottom: 1px solid var(--border);
-  }
-  
-  a {
-    color: var(--primary);
-    text-decoration: underline;
-    text-underline-position: under;
-  }
-  
-  a:focus,
-  a:hover {
-    text-decoration-style: wavy;
-    text-decoration-skip-ink: none;
-  }
-  
-  pre {
-    font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
-    font-size: var(--font-1);
-    padding: var(--spacing-3);
-    color: var(--text);
-    background: var(--sunken);
-    overflow: auto;
-    border-radius: var(--radii-default);
-    white-space: inherit;
-  }
-  
-  pre > code {
-    color: inherit;
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 0;
-    padding-right: 0;
-  }
-  
-  code {
-    font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
-    font-size: inherit;
-    color: var(--purple);
-    background: var(--sunken);
-    overflow: auto;
-    border-radius: var(--radii-small);
-    margin-left: var(--spacing-1);
-    margin-right: var(--spacing-1);
-    padding-left: var(--spacing-1);
-    padding-right: var(--spacing-1);
-  }
-  
-  p > code,
-  li > code {
-    color: var(--blue);
-    font-size: 0.875em;
-  }
-  
-  p > a > code,
-  li > a > code {
-    color: var(--blue);
-    font-size: 0.875em;
-  }
-  
-  li {
-    margin-top: var(--spacing-2);
-    margin-bottom: var(--spacing-2);
-  }
-  
-  table {
-    width: 100%;
-    margin-top: var(--spacing-4);
-    margin-bottom: var(--spacing-4);
-    border-collapse: separate;
-    border-spacing: 0;
-  }
-  
-  table > th,
-  table > td {
-    text-align: left;
-    padding: 4px;
-    padding-left: 0px;
-    border-color: var(--border);
-    border-bottom-style: solid;
-  }
-  
-  th {
-    vertical-align: bottom;
-    border-bottom-width: 2px;
-  }
-  
-  td {
-    vertical-align: top;
-    border-bottom-width: 1px;
-  }
-  
-  
-  @media screen and (min-width: 32em) {
-    .ultratitle {
-      font-size: var(--font-5);
-    }
-    .title {
-      font-size: var(--font-4);
-    }
-    .subtitle {
-      font-size: var(--font-2);
-    }
-    .eyebrow {
-      font-size: var(--font-3);
-    }
-    .lead {
-      font-size: var(--font-2);
-      margin-top: var(--spacing-2);
-      margin-bottom: var(--spacing-2);
-    }
-    .card {
-      padding: var(--spacing-3);
-    }
-    .container {
-      max-width: var(--size-layout);
-    }
-    .container.copy {
-      max-width: var(--size-copy);
-    }
-    .container.narrow {
-      max-width: var(--size-narrow);
-    }
-  }
-  
-  @media screen and (min-width: 48em) {
-    .ultratitle {
-      font-size: var(--font-6);
-    }
-    .title {
-      font-size: var(--font-5);
-    }
-    .subtitle {
-      font-size: var(--font-3);
-    }
-    .eyebrow {
-      font-size: var(--font-4);
-    }
-    .lead {
-      font-size: var(--font-3);
-      margin-top: var(--spacing-3);
-      margin-bottom: var(--spacing-3);
-    }
-    .card {
-      padding: var(--spacing-4);
-    }
-  }
-  
-  @media screen and (min-width: 64em) {
-    .ultratitle {
-      font-size: var(--font-7);
-    }
-    .title {
-      font-size: var(--font-6);
-    }
-    .container {
-      max-width: var(--size-layout-plus);
-    }
-    .container.wide {
-      max-width: var(--size-wide);
-    }
-    .container.copy {
-      max-width: var(--size-copy-plus);
-    }
-    .container.narrow {
-      max-width: var(--size-narrow-plus);
-    }
-  }
-  
\ No newline at end of file
+/* modified version of https://css.hackclub.com/theme.css  */
+:root {
+  /* why are the css vars swapped with incorrect names? well im to lazy to fix it. */
+  --darker: #121217;
+  --dark: #f9fafc;
+  --darkless: #e0e6ed;
+  --black: #fff;
+  --steel: #273444;
+  --slate: #3c4858;
+  --muted: #8492a6;
+  --smoke: #252429;
+  --snow: #17171d;
+  --white: #1f2d3d;
+  --red: #ec3750;
+  --orange: #ff8c37;
+  --yellow: #f1c40f;
+  --green: #33d6a6;
+  --cyan: #5bc0de;
+  --blue: #338eda;
+  --purple: #a633d6;
+  --text: var(--black);
+  --background: var(--white);
+  --elevated: var(--white);
+  --sheet: var(--snow);
+  --sunken: var(--smoke);
+  --border: var(--smoke);
+  --primary: #ec3750;
+  --secondary: #8492a6;
+  --accent: #5bc0de;
+  --twitter: #1da1f2;
+  --facebook: #3b5998;
+  --instagram: #e1306c;
+  --breakpoint-xs: 32em;
+  --breakpoint-s: 48em;
+  --breakpoint-m: 64em;
+  --breakpoint-l: 96em;
+  --breakpoint-xl: 128em;
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 16px;
+  --spacing-4: 32px;
+  --spacing-5: 64px;
+  --spacing-6: 128px;
+  --spacing-7: 256px;
+  --spacing-8: 512px;
+  --font-1: 12px;
+  --font-2: 16px;
+  --font-3: 20px;
+  --font-4: 24px;
+  --font-5: 32px;
+  --font-6: 48px;
+  --font-7: 64px;
+  --font-8: 96px;
+  --font-9: 128px;
+  --font-10: 160px;
+  --font-11: 192px;
+  --line-height-limit: 0.875;
+  --line-height-title: 1;
+  --line-height-heading: 1.125;
+  --line-height-subheading: 1.25;
+  --line-height-caption: 1.375;
+  --line-height-body: 1.5;
+  --font-weight-body: 400;
+  --font-weight-bold: 700;
+  --font-weight-heading: var(--font-weight-bold);
+  --letter-spacing-title: -0.009em;
+  --letter-spacing-headline: 0.009em;
+  --size-wide-plus: 2048px;
+  --size-wide: 1536px;
+  --size-layout-plus: 1200px;
+  --size-layout: 1024px;
+  --size-copy-ultra: 980px;
+  --size-copy-plus: 768px;
+  --size-copy: 680px;
+  --size-narrow-plus: 600px;
+  --size-narrow: 512px;
+  --radii-small: 4px;
+  --radii-default: 8px;
+  --radii-extra: 12px;
+  --radii-ultra: 16px;
+  --radii-circle: 99999px;
+  --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.125);
+  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.0625),
+    0 2px 4px rgba(0, 0, 0, 0.0625);
+  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.125);
+  --shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.0625),
+    0 8px 12px rgba(0, 0, 0, 0.125);
+}
+
+body {
+  font-family:
+    "Phantom Sans",
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  line-height: var(--line-height-body);
+  font-weight: var(--font-weight-body);
+  margin: 0;
+  min-height: 100vh;
+  text-rendering: optimizeLegibility;
+  font-smooth: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  color: var(--text);
+  background-color: var(--background);
+  box-sizing: border-box;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.monospace {
+  font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
+}
+
+.heading {
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.ultratitle {
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-limit);
+  letter-spacing: var(--letter-spacing-title);
+}
+
+.title {
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-title);
+  letter-spacing: var(--letter-spacing-title);
+}
+
+.subtitle {
+  margin-top: var(--spacing-3);
+  font-weight: var(--font-weight-body);
+  line-height: var(--line-height-subheading);
+  letter-spacing: var(--letter-spacing-headline);
+}
+
+.headline {
+  margin-top: var(--spacing-3);
+  margin-bottom: var(--spacing-3);
+  font-size: var(--font-4);
+  line-height: var(--line-height-heading);
+  letter-spacing: var(--letter-spacing-headline);
+}
+
+.subheadline {
+  margin-top: var(--spacing-0);
+  margin-bottom: var(--spacing-3);
+  font-size: var(--font-2);
+  line-height: var(--line-height-heading);
+  letter-spacing: var(--letter-spacing-headline);
+}
+
+.eyebrow {
+  color: var(--muted);
+  font-weight: var(--font-weight-heading);
+  letter-spacing: var(--letter-spacing-headline);
+  line-height: var(--line-height-subheading);
+  text-transform: uppercase;
+  margin-top: var(--spacing-0);
+  margin-bottom: var(--spacing-2);
+}
+
+.lead {
+  font-weight: var(--font-weight-body);
+}
+
+.caption {
+  color: var(--muted);
+  font-weight: var(--font-weight-body);
+  letter-spacing: var(--letter-spacing-headline);
+  line-height: var(--line-height-caption);
+}
+
+.pill {
+  border-radius: var(--radii-circle);
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  font-size: var(--font-2);
+  background: var(--primary);
+  color: var(--background);
+  font-weight: var(--font-weight-bold);
+}
+
+.outline-badge {
+  border-radius: var(--radii-circle);
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  font-size: var(--font-2);
+  background: none;
+  color: var(--muted);
+  border: 1px solid currentcolor;
+  font-weight: var(--font-weight-body);
+}
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: var(--font-weight-bold);
+  border-radius: var(--radii-circle);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-card);
+  letter-spacing: var(--letter-spacing-headline);
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform 0.125s ease-in-out,
+    box-shadow 0.125s ease-in-out;
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-align: center;
+  line-height: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: var(--theme-ui-colors-white, #ffffff);
+  background-color: var(--theme-ui-colors-primary, #ec3750);
+  border: 0;
+  font-size: var(--font-2);
+}
+
+button:focus,
+button:hover {
+  box-shadow: var(--shadow-elevated);
+  transform: scale(1.0625);
+}
+.button {
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: var(--font-weight-bold);
+  border-radius: var(--radii-circle);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-card);
+  letter-spacing: var(--letter-spacing-headline);
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform 0.125s ease-in-out,
+    box-shadow 0.125s ease-in-out;
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-align: center;
+  line-height: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: var(--theme-ui-colors-white, #ffffff);
+  background-color: var(--theme-ui-colors-primary, #ec3750);
+  border: 0;
+  font-size: var(--font-2);
+}
+
+.button:focus,
+.button:hover {
+  box-shadow: var(--shadow-elevated);
+  transform: scale(1.0625);
+}
+button.lg {
+  font-size: var(--font-3) !important;
+  line-height: var(--line-height-title);
+  padding-left: var(--spacing-4);
+  padding-right: var(--spacing-4);
+  padding-top: var(--spacing-3);
+  padding-bottom: var(--spacing-3);
+}
+
+button.outline {
+  background: none;
+  color: var(--primary);
+  border: 2px solid currentcolor;
+}
+
+button.cta {
+  font-size: var(--font-2);
+  background-image: radial-gradient(
+    ellipse farthest-corner at top left,
+    var(--orange),
+    var(--red)
+  );
+}
+
+.card {
+  background: var(--elevated);
+  color: var(--text);
+  border-radius: var(--radii-extra);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.card.sunken {
+  background: var(--sunken);
+  box-shadow: none;
+}
+
+.card.interactive {
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform 0.125s ease-in-out,
+    box-shadow 0.125s ease-in-out;
+}
+
+.card.interactive:hover,
+.card.interactive:focus {
+  transform: scale(1.0625);
+  box-shadow: var(--shadow-elevated);
+}
+
+input,
+textarea,
+select {
+  background: var(--elevated);
+  color: var(--text);
+  font-family: inherit;
+  border-radius: var(--radii-small);
+  border: 0;
+  font-size: inherit;
+  padding: var(--spacing-2);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+input::-webkit-input-placeholder,
+input::-moz-placeholder,
+input:-ms-input-placeholder,
+textarea::-webkit-input-placeholder,
+textarea::-moz-placeholder,
+textarea:-ms-input-placeholder,
+select::-webkit-input-placeholder,
+select::-moz-placeholder,
+select:-ms-input-placeholder {
+  color: var(--muted);
+}
+
+input[type="search"]::-webkit-search-decoration,
+textarea[type="search"]::-webkit-search-decoration,
+select[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+
+input[type="checkbox"] {
+  -webkit-appearance: checkbox;
+  -moz-appearance: checkbox;
+  appearance: checkbox;
+}
+
+label {
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  line-height: var(--line-height-caption);
+  font-size: var(--font-3);
+}
+
+label.horizontal {
+  display: flex;
+}
+
+.slider {
+  color: var(--primary);
+}
+
+.form-hidden {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
+.container {
+  width: 100%;
+  margin: auto;
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+}
+
+h1 {
+  font-size: var(--font-5);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+h2 {
+  font-size: var(--font-4);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+h3 {
+  font-size: var(--font-3);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+h4 {
+  font-size: var(--font-2);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+h5 {
+  font-size: var(--font-1);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+h6 {
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+p {
+  color: var(--text);
+  font-weight: var(--font-weight-body);
+  line-height: var(--line-height-body);
+  margin-top: var(--spacing-3);
+  margin-bottom: var(--spacing-3);
+}
+
+img {
+  max-width: 100%;
+}
+
+hr {
+  border: 0;
+  border-bottom: 1px solid var(--border);
+}
+
+a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-position: under;
+}
+
+a:focus,
+a:hover {
+  text-decoration-style: wavy;
+  text-decoration-skip-ink: none;
+}
+
+pre {
+  font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
+  font-size: var(--font-1);
+  padding: var(--spacing-3);
+  color: var(--text);
+  background: var(--sunken);
+  overflow: auto;
+  border-radius: var(--radii-default);
+  white-space: inherit;
+}
+
+pre > code {
+  color: inherit;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+code {
+  font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
+  font-size: inherit;
+  color: var(--purple);
+  background: var(--sunken);
+  overflow: auto;
+  border-radius: var(--radii-small);
+  margin-left: var(--spacing-1);
+  margin-right: var(--spacing-1);
+  padding-left: var(--spacing-1);
+  padding-right: var(--spacing-1);
+}
+
+p > code,
+li > code {
+  color: var(--blue);
+  font-size: 0.875em;
+}
+
+p > a > code,
+li > a > code {
+  color: var(--blue);
+  font-size: 0.875em;
+}
+
+li {
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-2);
+}
+
+table {
+  width: 100%;
+  margin-top: var(--spacing-4);
+  margin-bottom: var(--spacing-4);
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+table > th,
+table > td {
+  text-align: left;
+  padding: 4px;
+  padding-left: 0px;
+  border-color: var(--border);
+  border-bottom-style: solid;
+}
+
+th {
+  vertical-align: bottom;
+  border-bottom-width: 2px;
+}
+
+td {
+  vertical-align: top;
+  border-bottom-width: 1px;
+}
+
+@media screen and (min-width: 32em) {
+  .ultratitle {
+    font-size: var(--font-5);
+  }
+  .title {
+    font-size: var(--font-4);
+  }
+  .subtitle {
+    font-size: var(--font-2);
+  }
+  .eyebrow {
+    font-size: var(--font-3);
+  }
+  .lead {
+    font-size: var(--font-2);
+    margin-top: var(--spacing-2);
+    margin-bottom: var(--spacing-2);
+  }
+  .card {
+    padding: var(--spacing-3);
+  }
+  .container {
+    max-width: var(--size-layout);
+  }
+  .container.copy {
+    max-width: var(--size-copy);
+  }
+  .container.narrow {
+    max-width: var(--size-narrow);
+  }
+}
+
+@media screen and (min-width: 48em) {
+  .ultratitle {
+    font-size: var(--font-6);
+  }
+  .title {
+    font-size: var(--font-5);
+  }
+  .subtitle {
+    font-size: var(--font-3);
+  }
+  .eyebrow {
+    font-size: var(--font-4);
+  }
+  .lead {
+    font-size: var(--font-3);
+    margin-top: var(--spacing-3);
+    margin-bottom: var(--spacing-3);
+  }
+  .card {
+    padding: var(--spacing-4);
+  }
+}
+
+@media screen and (min-width: 64em) {
+  .ultratitle {
+    font-size: var(--font-7);
+  }
+  .title {
+    font-size: var(--font-6);
+  }
+  .container {
+    max-width: var(--size-layout-plus);
+  }
+  .container.wide {
+    max-width: var(--size-wide);
+  }
+  .container.copy {
+    max-width: var(--size-copy-plus);
+  }
+  .container.narrow {
+    max-width: var(--size-narrow-plus);
+  }
+}