:host(:not([data-theme=dark])),
:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-background-color: #fafafa;
  --pico-color: #373b46;
  --error-color: #ca2f2f;
  --pico-muted-color: #373b46;
  --pico-h3-color: #373b46;
  --pico-font-weight: 400;
  --pico-contrast-background: #181c25;
  --pico-font-family-sans-serif: "Inter", sans-serif;
  --pico-form-element-active-border-color: rgb(43 183 123);
  --pico-border-color: rgb(43 183 123);
  --pico-form-element-focus-color: rgb(43 183 123);
}

body {
  font-family: var(--pico-font-family-sans-serif);
  color: var(--pico-color);
}

body > main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 7rem);
  padding: 1rem 0;
  max-width: 600px;
  margin: 0 auto;
}

.error {
  background: white;
  border-radius: 10px;
  color: var(--error-color);
  padding: 0.5em 1em;
}

h3 {
  color: var(--pico-color);
  font-weight: 500;
  margin-bottom: 5px;
}

button.contrast {
  background-color: #181c25 !important;
}
button:hover {
  background-color: rgb(48.268, 51.7784, 61.432) !important;
}

.first-gradient {
  position: absolute;
  inset-inline: 0;
  top: calc(.25rem * -40);
  z-index: -10;
  transform: translateZ(0);
  overflow: hidden;
  filter: blur(180px);
  min-height: 100vh;
}

.first-gradient__inner {
  position: relative;
  left: calc(50% - 11rem);
  aspect-ratio: 1155 / 678;
  width: 36.125rem;
  max-width: none;
  transform: translateX(-50%) rotate(30deg);
  opacity: 0.3;
  min-height: 100vh;
  clip-path: polygon(
    74.1% 44.1%,
    100% 61.6%,
    97.5% 26.9%,
    85.5% 0.1%,
    80.7% 2%,
    72.5% 32.5%,
    60.2% 62.4%,
    52.4% 68.1%,
    47.5% 58.3%,
    45.2% 34.5%,
    27.5% 76.7%,
    0.1% 64.9%,
    17.9% 100%,
    27.6% 76.8%,
    76.1% 97.7%,
    74.1% 44.1%
  );
  background: linear-gradient(
    to right top,
    oklch(0.69 0.15 159.38),
    oklch(0.71 0.16 136.64)
  );
}

article {
  border: 1px solid #e4e4e7;
}

hgroup p {
  font-size: 18px !important;
  line-height: 28px;
}