:root {
  color-scheme: light dark;
  --bg: #f6f4ef;
  --surface-soft: #ece7dc;
  --fg: #171717;
  --muted: #68625a;
  --line: #ddd5c8;
  --accent: #255f85;
  --accent-strong: #10384f;
  --accent-soft: #d7e7ef;
  --button: #ffffff;
  --button-fg: #171717;
  --primary: #171717;
  --primary-fg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101112;
    --surface-soft: #202326;
    --fg: #f2f0eb;
    --muted: #b7b0a6;
    --line: #303336;
    --accent: #7fb7d6;
    --accent-strong: #c7e7f5;
    --accent-soft: #172a34;
    --button: #1d2022;
    --button-fg: #f2f0eb;
    --primary: #f2f0eb;
    --primary-fg: #111213;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 38%, transparent), transparent 42%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28%),
    var(--bg);
  color: var(--fg);
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 72px);
}

.hero {
  width: min(100%, 960px);
}

.identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
}

h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(3.5rem, 8.4vw, 7.2rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.subtitle {
  margin: 24px 0 0;
  color: var(--fg);
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 640;
  line-height: 1.35;
}

.summary {
  max-width: 650px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.55vw, 1.18rem);
  line-height: 1.75;
}

.principles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.principles li {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 680;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--button);
  color: var(--button-fg);
  font-size: 0.96rem;
  font-weight: 720;
  text-decoration: none;
  box-shadow: 0 1px 0 rgb(255 255 255 / 12%) inset;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.button svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button[href*="github"] svg {
  fill: currentColor;
  stroke: none;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 3px;
}

.button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-fg);
}

@media (max-width: 860px) {
  .identity {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .page {
    place-items: start center;
  }

  h1 {
    font-size: clamp(3rem, 16vw, 4.6rem);
  }

  .actions {
    display: grid;
  }

  .button {
    width: 100%;
  }
}