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

:root {
  --color-accent: #0969da;
  --color-accent-hover: #0550ae;
  --color-fg-default: #1f2328;
  --color-fg-muted: #656d76;
  --color-fg-subtle: #6e7781;
  --color-canvas-default: #ffffff;
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #d0d7de;
  --color-border-muted: #d8dee4;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --max-width: 1280px;
  --c-bg: #ffffff;
  --c-bg-alt: #f6f8fa;
  --c-bg-elv: #ffffff;
  --c-text-1: #1f2328;
  --c-text-2: #656d76;
  --c-text-3: #6e7781;
  --c-border: #d0d7de;
  --c-divider: #d8dee4;
  --c-brand-1: #0969da;
  --c-brand-2: #0550ae;
  --c-brand-3: #0969da;
  --c-dir: #54aeff;
  --c-green: #1a7f37;
  --c-red: #cf222e;
  --c-yellow: #9a6700;
  --c-gray-soft: rgba(175, 184, 193, 0.2);
  --border-radius: 6px;
  --code-line-height: 20px;
  --code-font-size: 12px;
  --code-color: var(--c-brand-1);
  --code-bg: var(--c-gray-soft);
  --code-block-bg: var(--c-bg-alt);
  --code-block-color: var(--c-text-1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-accent: #58a6ff;
    --color-accent-hover: #79c0ff;
    --color-fg-default: #e6edf3;
    --color-fg-muted: #8b949e;
    --color-fg-subtle: #6e7681;
    --color-canvas-default: #0d1117;
    --color-canvas-subtle: #161b22;
    --color-border-default: #30363d;
    --color-border-muted: #21262d;
    --c-bg: #0d1117;
    --c-bg-alt: #161b22;
    --c-bg-elv: #1c2128;
    --c-text-1: #e6edf3;
    --c-text-2: #8b949e;
    --c-text-3: #6e7681;
    --c-border: #30363d;
    --c-divider: #21262d;
    --c-brand-1: #58a6ff;
    --c-brand-2: #79c0ff;
    --c-brand-3: #58a6ff;
    --c-dir: #8b949e;
    --c-green: #3fb950;
    --c-red: #f85149;
    --c-yellow: #d29922;
    --c-gray-soft: rgba(110, 118, 129, 0.4);
  }
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-fg-default);
  background: var(--color-canvas-default);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.site-header {
  background: var(--color-canvas-default);
  border-bottom: 1px solid var(--color-border-default);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  height: 48px;
}

.nav-brand {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-brand:hover {
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--color-fg-muted);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.nav-links a.active {
  color: var(--color-fg-default);
  font-weight: 600;
}

.site-footer {
  margin-top: auto;
  padding: 24px 16px;
  background: var(--color-canvas-subtle);
  border-top: 1px solid var(--color-border-default);
  font-size: 12px;
  text-align: center;
}

.footer-nav,
.footer-social {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.footer-nav a,
.footer-social a {
  color: var(--color-fg-muted);
}

.footer-nav a:hover,
.footer-social a:hover {
  color: var(--color-accent);
}

.footer-sep {
  color: var(--color-fg-subtle);
}

.footer-copy {
  color: var(--color-fg-subtle);
}

@media (max-width: 600px) {
  .nav-brand-text {
    display: none;
  }
  .nav-resume {
    display: none;
  }
  .nav-links {
    gap: 16px;
  }
}