body {
  background-color: #121212;
  color: #e0e0e0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.container {
  max-width: 900px;
}

a {
  color: #bb86fc;
}

a:hover {
  color: #ff79c6;
  text-decoration: none;
}

.card {
  background-color: #1e1e1e;
  border: none;
}

.card h1 {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 1rem;
}

.card h2 {
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.nav-link {
  color: #e0e0e0 !important;
}

.nav-link:hover {
  color: #bb86fc !important;
}

hr {
  border-top: 1px solid #2a2a2a;
}

/* Code and Typography */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

:not(pre) > code {
  background-color: #282a36;
  color: #ff79c6;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.88em;
  border: 1px solid #3d4153;
}

pre {
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  background-color: #282a36;
  color: #f8f8f2;
}

/* Syntax Highlight Wrapper */
.highlight {
  position: relative;
  margin: 1.25rem 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #333333;
}

.highlight pre {
  margin-bottom: 0;
  padding: 1rem 4.5rem 1rem 1.2rem;
  background-color: #282a36;
  overflow-x: auto;
  border-radius: 6px;
}

.highlight .chroma {
  background-color: #282a36;
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Copy code button */
.copy-code-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: #a0a0a0;
  background-color: #1e1e1e;
  border: 1px solid #44475a;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, background-color 0.2s, color 0.2s;
  z-index: 5;
}

.highlight:hover .copy-code-button,
.copy-code-button:focus {
  opacity: 1;
}

.copy-code-button:hover {
  background-color: #44475a;
  color: #f8f8f2;
}

/* Mermaid Diagrams */
.mermaid {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1e1e1e !important;
  border: 1px solid #333333;
  border-radius: 6px;
  margin: 1.5rem 0;
  padding: 1.5rem 1rem;
  overflow-x: auto;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Equations (KaTeX) */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.75rem 0;
  margin: 1rem 0;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}