@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────────────── */

:root {
  --bg:      #0d1117;
  --fg:      #e6edf3;
  --panel:   #141a22;
  --accent:  #79c0ff;
  --code:    #a5d6ff;
  --dim:     #7d8590;
  --border:  #262d36;
  --link:    #79c0ff;
  --size:    15px;
  --lh:      1.7;
  --mono:    'Fira Code', ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace;
  --max:     960px;
  --pad:     40px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--size);
  line-height: var(--lh);
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--fg);
}

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

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

/* ── Root Layout ───────────────────────────────────────────────────────── */

.b-root {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--pad) 40px;
}

/* ── Top Bar ───────────────────────────────────────────────────────────── */

.b-top {
  background-color: var(--panel);
  padding: 8px 14px;
  margin-bottom: 22px;
}

.b-prompt-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.7;
}

.b-prompt {
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.b-top-host {
  font-weight: 500;
  color: var(--fg);
  flex-shrink: 0;
}

.b-top-path {
  color: var(--accent);
  background-color: rgba(121, 192, 255, 0.12);
  padding: 1px 6px;
  flex-shrink: 0;
}

.b-top-path:hover {
  text-decoration: none;
  background-color: rgba(121, 192, 255, 0.2);
}

.b-top-sep {
  color: var(--border);
  flex-shrink: 0;
}

.b-top-meta {
  color: var(--dim);
  flex-shrink: 0;
}

.b-top-spacer {
  flex: 1;
}

.b-ready {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* ── Blinking cursor ──────────────────────────────────────────────────── */

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.b-cursor {
  margin-left: 2px;
  animation: blink 1s step-start infinite;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.b-hero {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 18px;
  margin-bottom: 22px;
}

.b-hero-art {
  font-size: 9.5px;
  color: var(--accent);
  line-height: 1.05;
  opacity: 0.92;
  overflow: hidden;
  white-space: pre;
}

.b-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.b-hero-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.b-hero-tld {
  color: var(--dim);
}

.b-hero-sub {
  font-size: 14px;
  color: var(--dim);
  line-height: 1.7;
  max-width: 56ch;
  margin: 0;
}

.b-hero-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  font-size: 13px;
}

.b-hero-nav a {
  color: var(--dim);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.b-hero-nav a.is-active,
.b-hero-nav a:hover {
  color: var(--accent);
}

/* ── Divider ───────────────────────────────────────────────────────────── */

.b-divider {
  font-size: 12px;
  color: var(--border);
  line-height: 1.7;
  margin: 6px 0 22px;
  overflow: hidden;
  white-space: nowrap;
}

.b-divider span {
  color: var(--dim);
}

/* ── Main grid (posts + sidebar) ───────────────────────────────────────── */

.b-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: start;
  gap: 36px;
}

@media (max-width: 720px) {
  .b-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Post list ─────────────────────────────────────────────────────────── */

.b-main {
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
}

.b-post {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
  position: relative;
}

.b-post-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--dim);
}

.b-meta-date { color: var(--accent); }
.b-meta-dot  { color: var(--border); }
.b-meta-cat  { color: var(--fg); }
.b-meta-time { color: var(--dim); }

.b-meta-sp { flex: 1; }

.b-post-rule {
  font-size: 12px;
  color: var(--border);
  line-height: 1.7;
  margin: 2px 0 4px;
  overflow: hidden;
  white-space: nowrap;
}

.b-post-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.b-post-title a {
  color: var(--fg);
  text-decoration: none;
}

.b-post-title a:hover { color: var(--accent); }

.b-post-excerpt {
  font-size: 13.5px;
  color: var(--dim);
  line-height: 1.7;
  margin: 0;
}

.b-post-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}

/* ── Tags ──────────────────────────────────────────────────────────────── */

.b-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.b-tag {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  padding: 1px 0;
  cursor: pointer;
}

.b-tag:hover { text-decoration: underline; }

/* ── Read more link ────────────────────────────────────────────────────── */

.b-read {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.b-read:hover { text-decoration: underline; }

/* ── Pager ─────────────────────────────────────────────────────────────── */

.b-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  font-size: 13px;
  color: var(--dim);
}

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

.b-pager a:hover { text-decoration: underline; }

.b-pager-pos { color: var(--dim); }

/* ── Sidebar ───────────────────────────────────────────────────────────── */

.b-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 20px;
}

.b-side-block {
  padding: 10px 12px 12px;
  background-color: rgba(20, 26, 34, 0.5);
}

.b-side-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}

.b-side-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  font-size: 13px;
}

.b-side-list li a {
  color: var(--dim);
  font-size: 13px;
}

.b-side-list li a:hover { color: var(--fg); }

.b-tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
}

.b-mini {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.7;
  margin: 0;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */

.b-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--dim);
  margin-bottom: 16px;
}

.b-crumb a { color: var(--dim); text-decoration: none; }
.b-crumb a:hover { color: var(--accent); }

.b-crumb-sep { color: var(--border); }
.b-crumb-cur { color: var(--accent); }

/* ── Article header (box frame) ────────────────────────────────────────── */

.b-art-head { margin-bottom: 28px; }

.b-art-frame-top,
.b-art-frame-bot {
  font-size: 12px;
  color: var(--border);
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}

.b-art-frame-row {
  display: grid;
  grid-template-columns: 1ch 1fr 1ch;
  align-items: stretch;
}

.b-art-bar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  font-size: 12px;
  color: var(--border);
  line-height: 1;
}

.b-art-head-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 24px;
}

.b-art-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--dim);
}

.b-meta-day { color: var(--dim); }

.b-art-title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

.b-art-sub {
  font-size: 16px;
  color: var(--dim);
  max-width: 60ch;
  margin: 0;
  line-height: 1.7;
}

.b-art-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--dim);
}

.b-by-label { color: var(--dim); }

.b-by-name {
  color: var(--accent);
  cursor: pointer;
}

/* ── Article grid (body + sidebar) ─────────────────────────────────────── */

.b-art-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: start;
  gap: 48px;
}

@media (max-width: 720px) {
  .b-art-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Article body ──────────────────────────────────────────────────────── */

.b-art-body {
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 68ch;
  min-width: 0;
}

.b-art-body p { margin: 0 0 1.2em; }

.b-lede {
  font-size: 17px;
  line-height: 1.6;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  margin-bottom: 28px;
  color: var(--fg);
}

/* h2 sections inside article body */

.b-art-body h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 36px 0 14px;
  line-height: 1.2;
}

/* CSS counter for ## NN ─── rule above h2 */

.b-art-body {
  counter-reset: h2-counter;
}

.b-art-body h2::before {
  counter-increment: h2-counter;
  content: '## ' counter(h2-counter, decimal-leading-zero) ' ';
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 0;
}

.b-art-body h2::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  margin-top: 4px;
  margin-bottom: 14px;
}

.b-art-body h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 28px 0 10px;
}

.b-art-body h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 22px 0 8px;
}

/* Lists */

.b-art-body ul,
.b-art-body ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.b-art-body ul li::before {
  content: '▸ ';
  color: var(--accent);
}

.b-art-body ol {
  counter-reset: ol-counter;
}

.b-art-body ol li {
  counter-increment: ol-counter;
}

.b-art-body ol li::before {
  content: counter(ol-counter) '. ';
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

/* Inline code */

.b-art-body code,
code.b-inline {
  font-family: var(--mono);
  font-size: 0.91em;
  color: var(--code);
  background-color: rgba(121, 192, 255, 0.14);
  padding: 1px 6px;
}

/* Code blocks */

.b-art-body pre {
  background-color: var(--panel);
  border: 1px solid var(--border);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 1.4em;
  line-height: 1.6;
}

.b-art-body pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--fg);
}

/* Blockquote */

.b-art-body blockquote {
  margin: 0 0 1.2em;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  color: var(--dim);
}

/* Links in body */

.b-art-body a {
  color: var(--link);
  text-decoration: none;
}

.b-art-body a:hover { text-decoration: underline; }

/* Tables */

.b-art-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 1.4em;
}

.b-art-body th,
.b-art-body td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}

.b-art-body th {
  background-color: var(--panel);
  color: var(--accent);
  font-weight: 500;
}

/* Images */

.b-art-body img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

/* Horizontal rule */

.b-art-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* ── Article nav (prev/next) ───────────────────────────────────────────── */

.b-art-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 32px;
  margin-top: 48px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

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

.b-art-nav a:hover { text-decoration: underline; }

.b-art-nav .b-nav-prev { text-align: left; }
.b-art-nav .b-nav-next { text-align: right; }

/* ── List pages (archive, tag, category) ───────────────────────────────── */

.b-list-head {
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 22px;
}

.b-list-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}

.b-list-count {
  font-size: 12px;
  color: var(--dim);
}

/* ── Archives ──────────────────────────────────────────────────────────── */

.b-archive-year {
  font-size: 12px;
  color: var(--dim);
  margin: 28px 0 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.b-archive-year:first-child { margin-top: 0; }

.b-archive-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.b-archive-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
}

.b-archive-date {
  font-size: 12px;
  color: var(--dim);
  flex-shrink: 0;
  min-width: 90px;
}

.b-archive-item a {
  color: var(--fg);
}

.b-archive-item a:hover { color: var(--accent); }

/* ── Tags page ─────────────────────────────────────────────────────────── */

.b-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 22px;
}

.b-tags-cloud .b-tag {
  font-size: 13px;
}

.b-tags-cloud .b-tag-count {
  color: var(--border);
  font-size: 11px;
}

/* ── Categories / Authors pages ────────────────────────────────────────── */

.b-cat-list,
.b-authors-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.b-cat-item,
.b-author-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}

.b-cat-item a,
.b-author-item a {
  color: var(--fg);
}

.b-cat-item a:hover,
.b-author-item a:hover { color: var(--accent); }

.b-cat-count,
.b-author-count {
  font-size: 12px;
  color: var(--dim);
}

/* ── Static pages ──────────────────────────────────────────────────────── */

.b-page-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.b-footer {
  max-width: var(--max);
  margin: 48px auto 0;
  padding: 20px var(--pad);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--dim);
}

.b-footer a {
  color: var(--dim);
}

.b-footer a:hover { color: var(--accent); }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  :root {
    --size: 14px;
    --pad: 20px;
  }

  .b-hero-title { font-size: 24px; }
  .b-post-title { font-size: 18px; }
  .b-art-title  { font-size: 22px; }

  .b-art-head-inner { padding: 12px 14px; }
}