/* ---------- themes ---------- */
:root,
:root[data-theme="green"] {
  --bg: #0a0c0b;
  --bg-alt: #121614;
  --fg: #d6dbd6;
  --dim: #8b918c;
  --accent: #6be36b;      /* borders, banner, tags, active item */
  --accent-fg: #0a0c0b;   /* text on accent */
  --title: #52c9e6;       /* post titles, links */
  --rule: #3a403c;        /* thin separators between posts */
  --code-bg: #141a16;
  --rss: #f0a030;
}
:root[data-theme="gruvbox"] {
  --bg: #1d2021; --bg-alt: #282828; --fg: #ebdbb2; --dim: #a89984;
  --accent: #b8bb26; --accent-fg: #1d2021; --title: #83a598; --rule: #504945;
  --code-bg: #282828; --rss: #fe8019;
}
:root[data-theme="amber"] {
  --bg: #0c0800; --bg-alt: #160f02; --fg: #ffcc66; --dim: #b38a3c;
  --accent: #ffb000; --accent-fg: #0c0800; --title: #ffd27a; --rule: #4a3510;
  --code-bg: #1a1204; --rss: #ffb000;
}
:root[data-theme="nord"] {
  --bg: #2e3440; --bg-alt: #3b4252; --fg: #e5e9f0; --dim: #9aa5b8;
  --accent: #88c0d0; --accent-fg: #2e3440; --title: #81a1c1; --rule: #4c566a;
  --code-bg: #3b4252; --rss: #d08770;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 "JetBrains Mono", "Fira Code", "DejaVu Sans Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--title); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-fg); }
:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }
.dim { color: var(--dim); }
.prompt { color: var(--accent); }

.screen {
  max-width: 1240px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: column;
}

/* ---------- header ---------- */
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--accent);
}
.banner { color: var(--accent); }
.banner:hover { text-decoration: none; }
.banner pre {
  margin: 0;
  font: 700 clamp(7px, 1.35vw, 15px)/1.2 "JetBrains Mono", ui-monospace, monospace;
  text-shadow: 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.tagline { margin: 0 0 10px; color: var(--fg); white-space: nowrap; }
.cursor {
  color: var(--accent);
  margin-left: 4px;
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ---------- frame ---------- */
.frame {
  flex: 1;
  display: grid;
  grid-template-columns: 250px 1fr;
  margin-top: 22px;
}
.side {
  padding-right: 20px;
  border-right: 3px solid var(--accent);
}
.menu, .side ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block;
  padding: 1px 12px;
  color: var(--fg);
}
.menu .caret { visibility: hidden; color: inherit; }
.menu a:hover { color: var(--accent); text-decoration: none; }
.menu a:hover .caret { visibility: visible; }
.menu a.active { background: var(--accent); color: var(--accent-fg); }
.menu a.active .caret { visibility: visible; }

.side-tags, .side-links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 3px solid var(--accent);
}
.side-tags h3 { margin: 0 0 4px; font-size: 1em; font-weight: 400; color: var(--accent); }
.side-tags a { color: var(--fg); }
.side-tags a:hover { color: var(--accent); }
.count { color: var(--dim); }
.side-links a { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.ico { width: 18px; height: 18px; fill: currentColor; }
.ico.rss { fill: var(--rss); }

.main { padding: 0 0 24px 40px; min-width: 0; }

/* ---------- post list ---------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: 2px 0 18px; border-bottom: 2px solid var(--rule); margin-bottom: 18px; }
.post-list li:last-child { border-bottom: 0; }
.post-list h2 { margin: 0; font-size: 1.3em; font-weight: 700; line-height: 1.35; }
.meta { color: var(--dim); margin: 4px 0 6px; }
.meta .dot { margin: 0 8px; }
.tag { color: var(--accent); }
.summary { margin: 0; max-width: 72ch; }
.empty { color: var(--dim); }

.section { margin: 0 0 18px; font-size: 1.2em; color: var(--accent); font-weight: 700; }
.compact { list-style: none; margin: 0 0 18px; padding: 0; }
.compact li { padding: 3px 0; }
.compact .date { color: var(--dim); margin-right: 10px; }
.compact .id { color: var(--rule); margin-left: 6px; }
.year { color: var(--accent); margin: 18px 0 4px; font-size: 1.1em; }
.month { color: var(--fg); font-weight: 400; margin: 8px 0 4px; font-size: 1em; }
.tag-cloud { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 20px; }

.pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; padding-top: 14px; border-top: 2px solid var(--rule); }

/* ---------- article ---------- */
.cmd { margin: 0 0 6px; color: var(--dim); }
.post h1 { margin: 0; font-size: 1.6em; line-height: 1.3; color: var(--title); }
.updated { margin: 0; }
.prose { margin-top: 26px; max-width: 78ch; overflow-wrap: break-word; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--accent); line-height: 1.3; margin: 1.8em 0 .6em; }
.prose h1 { font-size: 1.4em; }
.prose h2 { font-size: 1.25em; }
.prose h2::before { content: "## "; color: var(--dim); }
.prose h3 { font-size: 1.1em; }
.prose h3::before { content: "### "; color: var(--dim); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose img { max-width: 100%; height: auto; border: 2px solid var(--rule); }
.prose blockquote { margin: 1em 0; padding: 0 0 0 16px; border-left: 3px solid var(--accent); color: var(--dim); }
.prose hr { border: 0; border-top: 2px dashed var(--rule); margin: 2em 0; }
.prose code { background: var(--code-bg); padding: 1px 5px; font-size: .92em; }
.prose pre { background: var(--code-bg); border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: 12px 16px; overflow-x: auto; line-height: 1.45; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; margin: 1em 0; display: block; overflow-x: auto; max-width: 100%; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 4px 12px; text-align: left; }
.prose th { color: var(--accent); background: var(--bg-alt); }
.prose ul, .prose ol { padding-left: 1.6em; }
.prose li::marker { color: var(--accent); }
.prose .contains-task-list { list-style: none; padding-left: .4em; }
.prose .task-list-item input { accent-color: var(--accent); margin-right: 8px; }
.prose .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.prose .katex { font-size: 1.1em; }

/* ---------- search ---------- */
.search { display: flex; align-items: center; gap: 12px; border: 2px solid var(--accent); padding: 6px 12px; max-width: 640px; }
.search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--fg); font: inherit; outline: none; caret-color: var(--accent); }
#search-status { margin: 12px 0 18px; }
mark { background: var(--accent); color: var(--accent-fg); }

/* ---------- status bar ---------- */
.status {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 14px;
  padding: 6px 18px;
  border: 2px solid var(--accent);
  color: var(--fg);
}
.status b { color: var(--accent); font-weight: 400; }
.hints b { margin-left: 18px; }
.hints b:first-child { margin-left: 0; }
.theme-btn {
  background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
}
.theme-btn:hover .theme-name { text-decoration: underline; }
.theme-name { color: var(--title); }
.status-right { margin-left: auto; color: var(--accent); white-space: nowrap; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .screen { padding: 14px 16px 12px; }
  .top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .banner pre { font-size: clamp(5px, 2.15vw, 10px); }
  .tagline { white-space: normal; margin: 0; }
  .frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; margin-top: 12px; }
  .side { border-right: 0; padding: 0 0 10px; border-bottom: 3px solid var(--accent); }
  .menu { display: flex; flex-wrap: wrap; gap: 2px 4px; }
  .menu a { padding: 0 8px; }
  .menu .caret { display: none; }
  .side-tags { display: none; }
  .side-links { margin-top: 8px; padding-top: 0; border-top: 0; display: flex; gap: 18px; }
  .main { padding: 20px 0 16px; }
  .post-list h2 { font-size: 1.15em; }
  .hints { display: none; }
  .status { gap: 16px; padding: 6px 12px; }
}