:root {
  --bg:           #0f1117;
  --surface:      #1a1d27;
  --border:       #2d3148;
  --text:         #e2e8f0;
  --muted:        #8892b0;
  --accent:       #7c5cbf;
  --accent-light: #9d7fe3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, serif;
  line-height: 1.75;
}

.portfolio {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 2rem 8rem;
}

.content h1 { font-size: 2.4rem; margin-bottom: 0.4rem; }
.content h2 { font-size: 1.5rem; margin: 2.5rem 0 0.6rem; color: var(--accent-light); }
.content h3 { font-size: 1.15rem; margin: 1.5rem 0 0.4rem; }
.content p  { margin-bottom: 1rem; }
.content a  { color: var(--accent-light); text-decoration: none; }
.content a:hover { text-decoration: underline; }
.content ul, .content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.content li { margin-bottom: 0.25rem; }
.content code {
  background: var(--surface);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
}
.content pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}
.content pre code { background: none; padding: 0; }
.content img {
  max-width: min(100%, 400px);
  height: auto;
  display: block;
  border-radius: 8px;
}

.cat-sprite {
  position: fixed;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 50;
  display: none;
  transform: translate(-50%, -100%);
}
.cat-sprite.active { display: block; }