html {
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at top, rgba(59, 130, 246, 0.05), transparent 30%),
    radial-gradient(circle at 85% 0%, rgba(16, 185, 129, 0.04), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 45%, #f1f5f9 100%);
  color: #0f172a;
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: transparent;
  color: inherit;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.dark {
  background-color: #09090b;
  background-image:
    radial-gradient(circle at top, rgba(245, 158, 11, 0.08), transparent 26%),
    radial-gradient(circle at 82% 0%, rgba(16, 185, 129, 0.07), transparent 22%),
    linear-gradient(180deg, #121214 0%, #09090b 42%, #030303 100%);
  color: #f8fafc;
  color-scheme: dark;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86));
  backdrop-filter: blur(18px);
}

html.dark header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(12, 12, 14, 0.96), rgba(5, 5, 7, 0.88));
}

main,
footer,
section {
  width: 100%;
}

footer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

html.dark footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}