:root {
  --font-geist-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --bg: #ffffff;
  --fg: #000000;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  --sh-class: #2d5e9d;
  --sh-identifier: #354150;
  --sh-sign: #8996a3;
  --sh-string: #007f7a;
  --sh-keyword: #e02518;
  --sh-comment: #a19595;
  --sh-jsxliterals: #6266d1;
  --sh-property: #e25a1c;
  --sh-entity: #e25a1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --fg: #ffffff;
    --sh-class: #4c97f8;
    --sh-identifier: white;
    --sh-keyword: #f47067;
    --sh-string: #0fa295;
  }
  html {
    color-scheme: dark;
  }
}

::selection {
  background-color: #47a3f3;
  color: #fefefe;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 360px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-geist-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 36rem;
  margin: 2rem 1rem 0;
}

@media (min-width: 1024px) {
  body {
    margin-left: auto;
    margin-right: auto;
  }
}

main {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 0.5rem;
}

@media (min-width: 768px) {
  main {
    padding: 0;
  }
}

code, pre {
  font-family: var(--font-geist-mono);
}

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

input, button {
  font: inherit;
  color: inherit;
}

input[type='text'],
input[type='email'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Navbar */
.nav {
  margin-left: -8px;
  margin-bottom: 4rem;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 0;
}

.nav-links {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav-links a {
  padding: 0.25rem 0.5rem;
  margin: 0.25rem;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.nav-links a:hover {
  color: var(--neutral-800);
}

@media (prefers-color-scheme: dark) {
  .nav-links a:hover {
    color: var(--neutral-200);
  }
}

/* Subscribe form in nav */
.nav-subscribe {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.subscribe-input {
  width: 6rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--neutral-300);
  background: transparent;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.subscribe-input:hover {
  border-color: var(--neutral-400);
}

.subscribe-input:focus {
  outline: none;
  border-color: var(--neutral-800);
  width: 10rem;
}

.subscribe-btn {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--neutral-300);
  background: transparent;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.subscribe-btn:hover {
  border-color: var(--neutral-400);
}

.subscribe-btn:disabled,
.subscribe-input:disabled {
  opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
  .subscribe-input,
  .subscribe-btn {
    border-color: var(--neutral-700);
  }
  .subscribe-input:hover,
  .subscribe-btn:hover {
    border-color: var(--neutral-600);
  }
  .subscribe-input:focus {
    border-color: var(--neutral-200);
  }
}

.subscribe-status {
  font-size: 0.875rem;
  padding: 0 0.5rem;
  color: var(--neutral-600);
}

@media (prefers-color-scheme: dark) {
  .subscribe-status { color: var(--neutral-400); }
}

/* Home / about section */
h1.page-title {
  margin: 0 0 2rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.about p {
  margin: 0 0 1rem;
}

.about a {
  text-decoration: underline;
  text-decoration-color: var(--neutral-400);
  text-underline-offset: 2px;
  text-decoration-thickness: 0.1em;
  transition: text-decoration-color 0.2s;
}

@media (prefers-color-scheme: dark) {
  .about a {
    text-decoration-color: var(--neutral-600);
  }
}

/* Post list */
.post-list {
  margin: 2rem 0;
}

.post-list a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.post-list-row {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 768px) {
  .post-list-row {
    flex-direction: row;
    gap: 0.5rem;
  }
}

.post-date {
  color: var(--neutral-600);
  width: 100px;
  font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
  .post-date { color: var(--neutral-400); }
}

.post-title {
  color: var(--neutral-900);
  letter-spacing: -0.01em;
}

@media (prefers-color-scheme: dark) {
  .post-title { color: var(--neutral-100); }
}

/* Blog post page */
.post-header h1.title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin: 0;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0 2rem;
  font-size: 0.875rem;
}

.post-meta .date {
  color: var(--neutral-600);
}

@media (prefers-color-scheme: dark) {
  .post-meta .date { color: var(--neutral-400); }
}

.share-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.share-buttons a {
  color: var(--neutral-600);
  transition: all 0.2s;
  display: inline-flex;
}

.share-buttons a:hover {
  color: var(--neutral-900);
  transform: scale(1.1);
}

@media (prefers-color-scheme: dark) {
  .share-buttons a { color: var(--neutral-400); }
  .share-buttons a:hover { color: var(--neutral-100); }
}

.share-buttons svg {
  width: 1rem;
  height: 1rem;
}

/* Prose (blog post content) */
.prose > :first-child {
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
}

.prose p {
  margin: 1rem 0;
  color: var(--neutral-800);
}

@media (prefers-color-scheme: dark) {
  .prose p { color: var(--neutral-200); }
}

.prose p strong {
  font-weight: 600;
}

.prose strong {
  font-weight: 500;
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--neutral-400);
  text-underline-offset: 2px;
  text-decoration-thickness: 0.1em;
  transition: text-decoration-color 0.2s;
}

@media (prefers-color-scheme: dark) {
  .prose a { text-decoration-color: var(--neutral-600); }
}

.prose h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 1.5rem 0 0.5rem;
}

.prose h2,
.prose h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 1.5rem 0 0.5rem;
}

.prose h4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 1.5rem 0 0.5rem;
}

.prose ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.prose ol {
  list-decimal: decimal;
  padding-left: 1.5rem;
}

#page-content li + li {
  margin-top: 0.35rem;
}

.prose img {
  margin: 0;
  border-radius: 0.5rem;
  max-width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: opacity 0.2s;
}

.prose img:hover {
  opacity: 0.9;
}

.prose pre {
  background: var(--neutral-50);
  border-radius: 0.5rem;
  overflow-x: auto;
  border: 1px solid var(--neutral-200);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  .prose pre {
    background: var(--neutral-900);
    border-color: var(--neutral-900);
  }
}

.prose code {
  padding: 0.125rem 0.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: var(--neutral-100);
}

@media (prefers-color-scheme: dark) {
  .prose code { background: var(--neutral-800); }
}

.prose pre code {
  padding: 0;
  background: transparent;
  border: initial;
  line-height: 1.5;
}

pre::-webkit-scrollbar { display: none; }
pre {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--neutral-300);
}

.prose table th,
.prose table td {
  border: 1px solid var(--neutral-300);
  padding: 0.5rem 1rem;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.prose table th {
  background: var(--neutral-100);
  font-weight: 600;
}

.prose table tbody tr:nth-child(even) {
  background: var(--neutral-50);
}

@media (prefers-color-scheme: dark) {
  .prose table,
  .prose table th,
  .prose table td {
    border-color: var(--neutral-700);
  }
  .prose table th {
    background: var(--neutral-800);
  }
  .prose table tbody tr:nth-child(even) {
    background: rgba(23, 23, 23, 0.5);
  }
}

.prose blockquote {
  border-left: 4px solid var(--neutral-300);
  padding: 0.5rem 0 0.5rem 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: var(--neutral-700);
}

@media (prefers-color-scheme: dark) {
  .prose blockquote {
    border-left-color: var(--neutral-700);
    color: var(--neutral-300);
  }
}

.prose details {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--neutral-300);
  border-radius: 0.5rem;
  background: var(--neutral-50);
}

@media (prefers-color-scheme: dark) {
  .prose details {
    border-color: var(--neutral-700);
    background: rgba(23, 23, 23, 0.5);
  }
}

.prose details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--neutral-900);
  list-style: none;
}

@media (prefers-color-scheme: dark) {
  .prose details summary { color: var(--neutral-100); }
}

.prose details summary::-webkit-details-marker { display: none; }

.prose details summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--neutral-600);
  transition: transform 0.2s;
}

.prose details[open] summary::before {
  transform: rotate(90deg);
}

.prose details > *:not(summary) {
  margin-top: 1rem;
}

/* Subscribe block under posts */
.post-subscribe {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--neutral-300);
}

@media (prefers-color-scheme: dark) {
  .post-subscribe { border-top-color: var(--neutral-700); }
}

.post-subscribe p {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin: 0 0 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .post-subscribe p { color: var(--neutral-400); }
}

.post-subscribe form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.post-subscribe input {
  flex: 1;
}

.post-subscribe .error {
  color: #ef4444;
  margin-top: 0.5rem;
}

/* Footer */
footer {
  margin-bottom: 4rem;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--neutral-600);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  footer ul {
    flex-direction: row;
    gap: 1rem;
  }
}

@media (prefers-color-scheme: dark) {
  footer ul { color: var(--neutral-300); }
}

footer a {
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

footer a:hover {
  color: var(--neutral-800);
}

@media (prefers-color-scheme: dark) {
  footer a:hover { color: var(--neutral-100); }
}

footer a svg {
  width: 12px;
  height: 12px;
}

footer a p {
  margin: 0 0 0 0.5rem;
  height: 1.75rem;
  line-height: 1.75rem;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  padding: 1rem;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 0.5rem;
  cursor: auto;
}

.lightbox button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: white;
  background: transparent;
  border: none;
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox button:hover {
  background: rgba(255, 255, 255, 0.1);
}