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

:root {
  --bg:      #ffffff;
  --surface: #f7f7f5;
  --text:    #111111;
  --muted:   #888888;
  --accent:  #449ef3;
  --border:  #000000;
  --max-w:   680px;
  --font-ui:   'JetBrains Mono', monospace;
  --font-body: "Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;
}

:root.dark {
  --bg:      #0a0a0a;
  --surface: #111111;
  --text:    #e8e6e0;
  --muted:   #555555;
  --accent:  #1e7ce7;
  --border:  #ffffff;
}

html { font-size: 16px; }

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-ui);
  line-height: 1.75;
  transition:  background .2s, color .2s;
}

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

/* Particles */
#particles-js {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
}

.nav-inner {
  max-width:      var(--max-w);
  margin:         0 auto;
  height:         56px;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
}

.site-title {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--text);
  letter-spacing: -0.02em;
}
.site-title:hover { text-decoration: none; opacity: .7; }

.nav-links {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
}

.nav-links a {
  color:     var(--muted);
  font-size: 0.85rem;
  transition: color .15s;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }

#theme-toggle {
  background:    none;
  border:        1px solid var(--muted);
  border-radius: 50%;
  width:         32px;
  height:        32px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--muted);
  transition:    color .2s, border-color .2s;
  padding:       0;
}
#theme-toggle:hover { color: var(--text); border-color: var(--text); }
#theme-toggle svg   { display: block; }

/* Main container */
.container {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   3rem 1.5rem;
}

/* Post list */
.page-content .post-list-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   3rem;
}

.page-content .post-list-header h1 {
  margin: 0;
  line-height: 1;
}

.post-list {
  list-style: none;
}

.post-item {
  padding:       1.5rem 0;
  border-bottom: 1px solid var(--border);
  display:       grid;
  gap:           0.25rem;
}
.post-item--first { border-top: 1px solid var(--border); }

.post-date {
  font-size: 0.75rem;
  color:     var(--muted);
}

.post-link {
  font-size:   1rem;
  font-weight: 500;
  color:       var(--text);
  line-height: 1.4;
}
.post-link:hover { color: var(--accent); text-decoration: none; }

.post-excerpt {
  font-size: 0.85rem;
  color:     var(--muted);
  margin-top: 0.25rem;
}

/* Article (post page) */
.post-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.post-header h1 {
  font-family: var(--font-body);
  font-size:     1.6rem;
  font-weight:   600;
  line-height:   1.3;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.post-meta {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.8rem;
  color:       var(--muted);
  flex-wrap:   wrap;
}

.meta-sep { opacity: .4; }

.post-content,
.page-content { 
  font-family:  var(--font-body);
  font-size:    1.05rem;
  line-height:  1.85;
  letter-spacing: 0.01em; 
}

.post-content h2 {
  font-size:    1.2rem;
  font-weight:  600;
  margin:       2rem 0 0.75rem;
  padding-top:  1rem;
  border-top:   1px solid var(--border);
}

.page-content h3 + ul {
  margin-left: 1.25rem;
  margin-top: 0.25rem;
}

.post-content h3 {
  font-size:   1rem;
  font-weight: 600;
  margin:      1.5rem 0 0.5rem;
}

.post-content p, .page-content p { margin-bottom: 1.25rem; }
.post-content ul,
.post-content ol                 { margin: 0 0 1.25rem 1.5rem; }
.post-content li                 { margin-bottom: 0.4rem; }
.post-content img                { max-width: 100%; border-radius: 6px; margin: 1.5rem 0; }
.post-content blockquote {
  border-left: 3px solid var(--accent);
  padding:     0.5rem 0 0.1rem 1rem;
  color:       var(--muted);
  margin:      1.5rem 0;
}

.post-content code {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       0.1em 0.4em;
  font-size:     0.88em;
}

.post-content pre {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 6px;
  padding:       1rem 1.25rem;
  overflow-x:    auto;
  margin-bottom: 1.25rem;
}

.post-content pre code {
  background: none;
  border:     none;
  padding:    0;
  font-size:  0.85em;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding:    1.5rem;
  margin-top: 4rem;
}

.footer-inner {
  max-width:      var(--max-w);
  margin:         0 auto;
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  font-size:      0.8rem;
  color:          var(--muted);
}

.footer-inner a { color: var(--muted); }
.footer-inner a:hover { color: var(--text); }

.reading-time {
  cursor: default;
}

@media (max-width: 720px) {
  .container { padding: 2rem 1rem; }
  .post-header h1 { font-size: 1.3rem; }
}