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

:root {
  --surface: #0a0a0b;
  --surface-raised: #141416;
  --border: #3d3d3d;

  --text-primary: #f8f8f8;
  --text-heading: #ffffff;
  --text-muted: #c0c0c0;

  --accent: #a5b4fc;
  --accent-light: #c7d2fe;
  --accent-border: rgba(165, 180, 252, 0.35);
  --accent-tag-bg: rgba(165, 180, 252, 0.08);

  --nav-blur-bg: rgba(10, 10, 11, 0.85);
  --font: 'Fira Sans', system-ui, sans-serif;
}

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

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.35s ease, color 0.35s ease,
    border-color 0.35s ease, box-shadow 0.35s ease !important;
}

html {
  font-family: var(--font);
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 300;
  line-height: 1.75;
}


/* ── Nav ── */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: var(--nav-blur-bg);
  border-bottom: 1px solid var(--accent);
}

nav.site-nav {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 3.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav.site-nav .nav-brand a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: opacity 0.2s;
}

nav.site-nav .nav-brand a:hover {
  opacity: 0.75;
}

nav.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.site-nav .nav-links a {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

nav.site-nav .nav-links a:hover {
  color: var(--text-primary);
}

.nav-end {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.theme-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2em 0.35em;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
}

.theme-toggle:hover {
  color: var(--accent);
}

/* ── Hamburger ── */
.nav-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  width: 2rem;
  height: 2rem;
}

.nav-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.nav-menu-btn.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-menu-btn.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-menu-btn.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Layout ── */
main {
  flex: 1;
}

.content-width {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Hero ── */
.hero {
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  color: var(--accent);
}

.hero .hero-tagline {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 30rem;
}

.hero .hero-body {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.7;
  max-width: 36rem;
  margin: 0;
}

/* ── Section header ── */
.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.section-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-link {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.15s;
}

.section-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* ── Index two-column layout ── */
.index-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  padding-bottom: 4.5rem;
}

/* ── Post list ── */
.posts-section {}

.posts-list {
  display: flex;
  flex-direction: column;
}

/* ── Projects column (index) ── */
.projects-col {}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  padding: 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.project-card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 4px 16px rgba(129, 140, 248, 0.07);
}

.project-card h3 {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-heading);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
  transition: color 0.15s;
  line-height: 1.3;
}

.project-card:hover h3 {
  color: var(--accent-light);
}

.project-card .card-desc {
  font-size: 0.73rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
}

.project-card .card-tag {
  font-size: 0.62rem;
  font-weight: 300;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 0.12em 0.45em;
  border-radius: 3px;
}

/* ── Full projects page ── */
.projects-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 2rem;
}

.project-card--full {
  aspect-ratio: 1;
  padding: 1.1rem;
}

.project-card--full h3 {
  font-size: 0.88rem;
}

.project-card--full .card-desc {
  font-size: 0.72rem;
  -webkit-line-clamp: 4;
}

.card-gh-link {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.15s;
}

.project-card:hover .card-gh-link {
  color: var(--accent-light);
}

.page-intro {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 300;
  margin: -0.5rem 0 0;
  max-width: 48rem;
}

.page-intro p {
  margin: 0;
}

.post-item {
  display: block;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s;
}

.post-item:last-child {
  border-bottom: none;
}

.post-item:hover {
  border-bottom-color: var(--accent-border);
}

.post-item .post-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.post-item .sep {
  color: var(--border);
}

.post-item h3 {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-heading);
  margin: 0 0 0.4rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 0.15s;
}

.post-item:hover h3 {
  color: var(--accent-light);
}

.post-item .post-desc {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
  margin: 0 0 0.65rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag {
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--text-muted);
  background: var(--accent-tag-bg);
  border: 1px solid var(--border);
  padding: 0.15em 0.55em;
  border-radius: 4px;
}

.post-item .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.post-item .tag {
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--text-muted);
  background: var(--accent-tag-bg);
  border: 1px solid var(--border);
  padding: 0.15em 0.55em;
  border-radius: 4px;
}

/* ── Post three-column layout (toc | body | margin) ── */
.post-layout {
  display: grid;
  grid-template-columns: 240px 1fr minmax(0, 200px);
  gap: 0 4rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  justify-content: center;
}

.post-wrap {
  min-width: 0;
  padding: 3rem 0 5rem;
  align-self: start;
}

/* ── TOC drawer toggle (mobile) ── */
.toc-toggle {
  display: none;
  position: fixed;
  bottom: 2rem;
  left: 1.25rem;
  z-index: 41;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: var(--font);
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  transition: color 0.15s, border-color 0.15s;
}

.toc-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-border);
}

/* ── Post aside column (empty grid slot) ── */
.post-asides {
  min-width: 0;
}

/* ── Aside inline reference marker ── */
.aside-ref {
  font-size: 0.65em;
  font-weight: 500;
  color: var(--accent);
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
}

/* ── Sticky TOC sidebar ── */
.post-toc {
  padding-top: 4rem;
}

.toc-inner {
  position: sticky;
  top: 5.5rem;
}

.toc-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.toc-inner .toc {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.toc-inner .toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-inner .toc>ul>li {
  margin-bottom: 0.2rem;
}

.toc-inner .toc li {
  margin: 0;
}

.toc-inner .toc ul ul {
  padding-left: 0.85rem;
  border-left: 1px solid var(--border);
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.toc-inner .toc a {
  display: block;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.2rem 0;
  line-height: 1.4;
  transition: color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-inner .toc a:hover {
  color: var(--accent-light);
}

.toc-inner .toc a.toc-active {
  color: var(--accent-light);
  font-weight: 400;
}

/* ── Post header ── */
.post-header {
  margin-bottom: 1.8rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.post-header h1 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text-heading);
  margin: 0 0 0.75rem;
}

.post-header .subtitle {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.post-header .byline {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.post-header .sep {
  color: var(--border);
}

.post-header .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.post-header .tag {
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--text-muted);
  background: var(--accent-tag-bg);
  border: 1px solid var(--border);
  padding: 0.15em 0.55em;
  border-radius: 4px;
}

code,
pre,
.codehilite {
  border-color: #4a4a4a;
}

pre code {
  border: none;
}

/* ── Post body ── */
.post-body {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
}

/* ── Aside / margin note ── */
.post-body .aside-note {
  float: right;
  clear: right;
  /* push aside past the body column into the third grid column.
     negative margin-right cancels the width, so body text doesn't wrap around it. */
  width: 200px;
  margin-right: calc(-200px - 4rem);
  margin-top: 0rem;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--text-muted);
  border-left: 2px solid var(--border);
  padding: 0.35rem 0 0.35rem 0.75rem;
  line-height: 1.55;
}

.aside-num {
  font-size: 0.7em;
  font-weight: 500;
  color: var(--accent);
  vertical-align: super;
  line-height: 0;
  margin-right: 0.25em;
}

.post-body .aside-note p {
  margin: 0 0 0.4rem;
}

.post-body .aside-note p:last-child {
  margin: 0;
}

.post-body h1,
.post-body h2,
.post-body h3 {
  scroll-margin-top: 6rem;
}


.post-body p {
  margin-bottom: 1.25rem;
}

.post-body h1 {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin: 2.5rem 0 1rem;
  line-height: 1.2;
}

.post-body h2 {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin: 2rem 0 0.75rem;
  line-height: 1.2;
}

.post-body h3 {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-heading);
  margin: 1.75rem 0 0.5rem;
}

/* ── Typography ── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  line-height: 1.2;
}

a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: var(--text-heading);
}

.post-body a {
  color: var(--accent-light);
  border-bottom: 1px solid var(--border);
  transition: color 0.15s, border-color 0.15s;
}

.post-body a:hover {
  color: var(--text-heading);
  border-bottom-color: var(--border);
}

strong {
  font-weight: 500;
  color: var(--text-heading);
}

em {
  font-style: italic;
}

hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 3rem 0;
}

.ornament {
  text-align: center;
  margin: 3rem 0;
  color: var(--accent);
  opacity: 0.4;
  font-size: 0.9rem;
  letter-spacing: 0.4em;
}

.ornament::before {
  content: '~  *  ~';
}

/* ── Code ── */
code {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.75em;
  font-weight: 400;
  background: var(--surface-raised);
  color: var(--accent-light);
  padding: 0.15em 0.45em;
  border-radius: 3px;
  border: 1px solid var(--border);
  white-space: pre-wrap;
}

pre {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  padding: 1.5rem 1.75rem;
  overflow-x: auto;
  overflow-wrap: break-word;
  margin: 2rem 0;
  border-radius: 8px;
}

pre code {
  background: transparent;
  color: var(--text-primary);
  padding: 0;
  border: none;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: normal;
  text-align: left;
  text-indent: 1.5em hanging each-line;
  display: block;
}

.codehilite {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  margin: 2rem 0;
  border-radius: 8px;
  overflow: hidden;
}

.codehilite pre {
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  font-weight: 300;
}

.codehilite .hll {
  background: rgba(129, 140, 248, 0.1);
}

.codehilite .k,
.codehilite .kw {
  color: #c7d2fe;
  font-weight: 500;
}

.codehilite .kn,
.codehilite .kp,
.codehilite .kr,
.codehilite .kt {
  color: #c7d2fe;
}

.codehilite .cf {
  color: #c7d2fe;
  font-weight: 500;
}

.codehilite .pp {
  color: #c7d2fe;
}

.codehilite .ot {
  color: #c7d2fe;
}

.codehilite .dt {
  color: #67e8f9;
}

.codehilite .dv,
.codehilite .mi,
.codehilite .mf,
.codehilite .mo,
.codehilite .bn,
.codehilite .fl {
  color: #86efac;
}

.codehilite .s,
.codehilite .s1,
.codehilite .s2,
.codehilite .sb,
.codehilite .sc,
.codehilite .se,
.codehilite .si,
.codehilite .sl,
.codehilite .ss,
.codehilite .sx {
  color: #fdba74;
}

.codehilite .c,
.codehilite .c1,
.codehilite .cm,
.codehilite .cs,
.codehilite .cp {
  color: #82828d;
  font-style: italic;
}

.codehilite .nd {
  color: #67e8f9;
}

.codehilite .nf,
.codehilite .fm {
  color: #93c5fd;
}

.codehilite .nc {
  color: #67e8f9;
}

.codehilite .ne {
  color: #fca5a5;
}

.codehilite .nb {
  color: var(--text-muted);
}

.codehilite .o,
.codehilite .ow {
  color: #71717a;
}

.codehilite .err {
  color: #fca5a5;
  font-weight: 500;
}

.codehilite .nv,
.codehilite .vi {
  color: var(--text-primary);
}

/* ── Blockquote ── */
blockquote {
  background: var(--surface-raised);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  font-weight: 300;
  color: var(--text-muted);
  border-radius: 0 6px 6px 0;
  position: relative;
}

blockquote::before {
  content: '\201C';
  font-size: 2.5rem;
  color: var(--accent);
  opacity: 0.2;
  position: absolute;
  top: -0.2rem;
  left: 0.45rem;
  line-height: 1;
}

/* ── Tables ── */
table {
  border-collapse: collapse;
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  margin: 2rem 0;
  font-size: 0.85rem;
  border-radius: 8px;
  overflow: hidden;
}

th {
  background: rgba(129, 140, 248, 0.05);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  padding: 0.75rem 1rem;
  text-align: left;
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 300;
  color: var(--text-primary);
}

tr:last-child td {
  border-bottom: none;
}

/* ── Images ── */
img {
  max-width: 100%;
  display: block;
  margin: 2rem auto;
}

figcaption,
.img-caption {
  text-align: center;
  font-style: italic;
  font-weight: 300;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: -1.25rem;
  margin-bottom: 2rem;
}

/* ── Figures (block images + inlined SVG diagrams) ── */
.post-body figure {
  margin: 2rem 0;
  text-align: center;
}

.post-body figure img,
.post-body figure svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.post-body figure figcaption {
  margin: 0.85rem 0 0;
}

/* ── Inlined SVG diagrams (dark-first palette; recoloured for light mode
   further down). These classes carry no inline fill/stroke, so a default
   must exist here or the shapes fall back to the SVG spec's black fill /
   no stroke and vanish against a dark background. ── */
.post-body svg .mv,
.post-body svg .lgd {
  fill: var(--text-muted);
}

.post-body svg .mvp,
.post-body svg .tag {
  fill: var(--accent);
}

.post-body svg .mvx,
.post-body svg .pl {
  fill: #6b7280;
}

.post-body svg .edge {
  stroke: #4b4f58;
}

.post-body svg .edgep,
.post-body svg .cut {
  stroke: var(--accent);
}

.post-body svg .edgex {
  stroke: #6b7280;
  stroke-dasharray: 5 4;
}

.post-body svg .edgenew,
.post-body svg .edgeback {
  stroke: var(--accent-light);
}

.post-body svg .netl {
  stroke: var(--text-muted);
}

.post-body svg .node {
  fill: var(--surface-raised);
  stroke: #6b7280;
}

.post-body svg .nodep {
  fill: rgba(165, 180, 252, 0.12);
  stroke: var(--accent);
}

.post-body svg .nodex {
  fill: rgba(107, 114, 128, 0.08);
  stroke: #6b7280;
  stroke-dasharray: 3 2;
}

.post-body svg .nodenew,
.post-body svg .net {
  fill: rgba(165, 180, 252, 0.12);
  stroke: var(--accent-light);
}

.post-body svg .leaf {
  fill: rgba(165, 180, 252, 0.18);
  stroke: var(--accent);
}

.post-body svg .ring {
  stroke: var(--accent-light);
}

.post-body svg .netd {
  fill: var(--accent);
}

.post-body svg .meter {
  fill: var(--border);
}

.post-body svg .meterf {
  fill: var(--accent);
}

/* ── Callout blocks ── */
.theorem,
.proof,
.definition,
.remark,
.example,
.lemma,
.corollary {
  padding: 1.5rem 1.75rem 1.25rem;
  margin: 2rem 0;
  border-left: 3px solid;
  border-radius: 0 6px 6px 0;
  position: relative;
  font-weight: 300;
}

.theorem::before,
.proof::before,
.definition::before,
.remark::before,
.example::before,
.lemma::before,
.corollary::before {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
}

.theorem {
  background: rgba(129, 140, 248, 0.05);
  border-color: var(--accent);
}

.theorem::before {
  content: "theorem";
  color: var(--accent);
}

.lemma {
  background: rgba(129, 140, 248, 0.05);
  border-color: #6366f1;
}

.lemma::before {
  content: "lemma";
  color: #6366f1;
}

.corollary {
  background: rgba(129, 140, 248, 0.05);
  border-color: #6366f1;
}

.corollary::before {
  content: "corollary";
  color: #6366f1;
}

.proof {
  background: var(--surface-raised);
  border-color: var(--border);
}

.proof::before {
  content: "proof";
  color: var(--text-muted);
  font-style: italic;
}

.definition {
  background: var(--surface-raised);
  border-color: var(--border);
}

.definition::before {
  content: "definition";
  color: var(--text-muted);
}

.remark {
  background: var(--surface-raised);
  border-color: var(--border);
}

.remark::before {
  content: "remark";
  color: var(--text-muted);
}

.example {
  background: var(--surface-raised);
  border-color: var(--border);
}

.example::before {
  content: "example";
  color: var(--text-muted);
}

/* ── Collapsible details ── */
.post-body details {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  margin: 2rem 0;
}

.post-body details summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
}

.post-body details summary::-webkit-details-marker {
  display: none;
}

.post-body details summary::before {
  content: '▸';
  font-size: 0.75em;
  display: inline-block;
  transition: transform 0.2s ease;
}

.post-body details[open] summary::before {
  transform: rotate(90deg);
}

.post-body details summary:hover {
  opacity: 0.75;
}

.post-body details[open] summary {
  border-bottom: 1px solid var(--border);
}

.post-body .details-body {
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
}

.post-body .details-body>*:first-child {
  margin-top: 0;
}

.post-body .details-body>*:last-child {
  margin-bottom: 0;
}

/* ── Post prev/next nav ── */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
  max-width: 46%;
  transition: opacity 0.15s;
}

.post-nav-newer {
  margin-left: auto;
  text-align: right;
}

.post-nav-label {
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.post-nav-title {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-heading);
  line-height: 1.3;
  transition: color 0.15s;
}

.post-nav-item:hover .post-nav-title {
  color: var(--accent-light);
}

/* ── Page (non-post) ── */
.page-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  font-weight: 300;
}

.page-wrap--wide {
  max-width: 1080px;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
  color: var(--text-heading);
}

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

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a,
.footer-inner a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover,
.footer-inner a:hover {
  color: var(--accent-light);
}

/* ── Selection ── */
::selection {
  background: rgba(129, 140, 248, 0.2);
  color: var(--text-heading);
}

::-moz-selection {
  background: rgba(129, 140, 248, 0.2);
  color: var(--text-heading);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ── Page transition ── */
@property --reveal {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -60%;
}

@keyframes pageFadeIn {
  from {
    --reveal: -60%;
  }

  to {
    --reveal: 160%;
  }
}

main {
  mask-image: linear-gradient(135deg,
      black calc(var(--reveal) - 50%),
      transparent calc(var(--reveal) + 50%));
  -webkit-mask-image: linear-gradient(135deg,
      black calc(var(--reveal) - 50%),
      transparent calc(var(--reveal) + 50%));
  animation: pageFadeIn 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-page="index"] main {
  animation-duration: 10s;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .post-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* TOC becomes a slide-in drawer */
  .post-toc {
    display: block;
    position: fixed;
    top: 4rem;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 40;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1.5rem;
    padding-top: 2rem;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .post-toc.is-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.25);
  }

  .toc-inner {
    position: static;
  }

  .toc-toggle {
    display: block;
  }

  .post-body .aside-note {
    display: block;
    float: none;
    width: auto;
    margin: 1rem 0;
    margin-right: 0;
  }

  .index-grid {
    grid-template-columns: 1fr;
  }

  .projects-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  nav.site-nav {
    padding: 0 1rem;
  }

  .nav-menu-btn {
    display: flex;
  }

  nav.site-nav .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: -1rem;
    right: -1rem;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.25rem 0;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  }

  nav.site-nav .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
  }

  nav.site-nav .nav-links li {
    padding: 0;
  }

  nav.site-nav .nav-links a {
    display: block;
    padding: 0.75rem 2.25rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
  }

  nav.site-nav .nav-links li:last-child a {
    border-bottom: none;
  }

  .content-width {
    padding: 0 1rem;
  }

  .page-wrap {
    padding: 2.5rem 1rem 5rem;
  }

  .hero {
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .projects-page-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .hero-actions .btn {
    justify-content: center;
  }

  .hero-actions .btn-inline {
    margin-top: 0.2rem;
  }
}

@media (max-width: 560px) {
  .post-item {
    grid-template-columns: 1.6rem 1fr;
    gap: 0.6rem;
  }

  .post-num {
    font-size: 0.7rem;
  }

  .page-kicker {
    font-size: 0.75rem;
  }
}

/* ── Light mode (system preference) ── */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --surface: #f1f2f5;
    --surface-raised: #fafbfd;
    --border: #e0e2e7;
    --text-primary: #0f172a;
    --text-heading: #020617;
    --text-muted: #475569;
    --accent: #6366f1;
    --accent-light: #4f46e5;
    --accent-border: rgba(99, 102, 241, 0.3);
    --accent-tag-bg: rgba(99, 102, 241, 0.06);
    --nav-blur-bg: rgba(241, 242, 245, 0.90);
  }

  html:not([data-theme="dark"]) .project-card {
    background: #e8eaef;
    border-color: #c7cad3;
  }

  html:not([data-theme="dark"]) .post-header {
    border-bottom-color: #b2b2b8;
  }

  html:not([data-theme="dark"]) code,
  html:not([data-theme="dark"]) pre,
  html:not([data-theme="dark"]) .codehilite {
    background-color: #e8eaef;
    border-color: #b7bcc6;
  }

  html:not([data-theme="dark"]) pre code {
    background: transparent;
    border: none;
  }

  html:not([data-theme="dark"]) .project-card:hover {
    box-shadow: none;
  }

  html:not([data-theme="dark"]) header.site-header {
    border-bottom: 1px solid var(--accent);
  }

  html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
    background: #d2d2d6;
  }

  html:not([data-theme="dark"]) ::selection {
    background: rgba(99, 102, 241, 0.12);
    color: var(--text-heading);
  }

  html:not([data-theme="dark"]) ::-moz-selection {
    background: rgba(99, 102, 241, 0.12);
    color: var(--text-heading);
  }

  html:not([data-theme="dark"]) .codehilite .k,
  html:not([data-theme="dark"]) .codehilite .kw,
  html:not([data-theme="dark"]) .codehilite .kn,
  html:not([data-theme="dark"]) .codehilite .kp,
  html:not([data-theme="dark"]) .codehilite .kr,
  html:not([data-theme="dark"]) .codehilite .kt,
  html:not([data-theme="dark"]) .codehilite .cf,
  html:not([data-theme="dark"]) .codehilite .pp,
  html:not([data-theme="dark"]) .codehilite .ot {
    color: #4f46e5;
  }

  html:not([data-theme="dark"]) .codehilite .dv,
  html:not([data-theme="dark"]) .codehilite .mi,
  html:not([data-theme="dark"]) .codehilite .mf,
  html:not([data-theme="dark"]) .codehilite .mo,
  html:not([data-theme="dark"]) .codehilite .bn,
  html:not([data-theme="dark"]) .codehilite .fl {
    color: #15803d;
  }

  html:not([data-theme="dark"]) .codehilite .s,
  html:not([data-theme="dark"]) .codehilite .s1,
  html:not([data-theme="dark"]) .codehilite .s2,
  html:not([data-theme="dark"]) .codehilite .sb,
  html:not([data-theme="dark"]) .codehilite .sc,
  html:not([data-theme="dark"]) .codehilite .se,
  html:not([data-theme="dark"]) .codehilite .si,
  html:not([data-theme="dark"]) .codehilite .sl,
  html:not([data-theme="dark"]) .codehilite .ss,
  html:not([data-theme="dark"]) .codehilite .sx {
    color: #0f766e;
  }

  html:not([data-theme="dark"]) .codehilite .c,
  html:not([data-theme="dark"]) .codehilite .c1,
  html:not([data-theme="dark"]) .codehilite .cm,
  html:not([data-theme="dark"]) .codehilite .cs,
  html:not([data-theme="dark"]) .codehilite .cp {
    color: #71717a;
  }

  html:not([data-theme="dark"]) .codehilite .nf,
  html:not([data-theme="dark"]) .codehilite .fm {
    color: #1d4ed8;
  }

  html:not([data-theme="dark"]) .codehilite .nc,
  html:not([data-theme="dark"]) .codehilite .dt,
  html:not([data-theme="dark"]) .codehilite .nd {
    color: #0e7490;
  }

  html:not([data-theme="dark"]) .codehilite .ne {
    color: #dc2626;
  }

  html:not([data-theme="dark"]) .codehilite .o,
  html:not([data-theme="dark"]) .codehilite .ow {
    color: #525252;
  }

  html:not([data-theme="dark"]) .codehilite .hll {
    background: rgba(99, 102, 241, 0.08);
  }
}

/* ── Explicit light mode (manual toggle) ── */
html[data-theme="light"] {
  --surface: #f1f2f5;
  --surface-raised: #fafbfd;
  --border: #e0e2e7;
  --text-primary: #0f172a;
  --text-heading: #020617;
  --text-muted: #475569;
  --accent: #6366f1;
  --accent-light: #4f46e5;
  --accent-border: rgba(99, 102, 241, 0.3);
  --accent-tag-bg: rgba(99, 102, 241, 0.06);
  --nav-blur-bg: rgba(241, 242, 245, 0.90);
}

html[data-theme="light"] .project-card {
  background: #e8eaef;
  border-color: #c7cad3;
}

html[data-theme="light"] .post-header {
  border-bottom-color: #b2b2b8;
}

html[data-theme="light"] code,
html[data-theme="light"] pre,
html[data-theme="light"] .codehilite {
  background-color: #e8eaef;
  border-color: #b7bcc6;
}

html[data-theme="light"] pre code {
  background: transparent;
  border: none;
}

html[data-theme="light"] .project-card:hover {
  box-shadow: none;
}

html[data-theme="light"] header.site-header {
  border-bottom: 1px solid var(--accent);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #d2d2d6;
}

html[data-theme="light"] ::selection {
  background: rgba(99, 102, 241, 0.12);
  color: var(--text-heading);
}

html[data-theme="light"] ::-moz-selection {
  background: rgba(99, 102, 241, 0.12);
  color: var(--text-heading);
}

html[data-theme="light"] .codehilite .k,
html[data-theme="light"] .codehilite .kw,
html[data-theme="light"] .codehilite .kn,
html[data-theme="light"] .codehilite .kp,
html[data-theme="light"] .codehilite .kr,
html[data-theme="light"] .codehilite .kt,
html[data-theme="light"] .codehilite .cf,
html[data-theme="light"] .codehilite .pp,
html[data-theme="light"] .codehilite .ot {
  color: #4f46e5;
}

html[data-theme="light"] .codehilite .dv,
html[data-theme="light"] .codehilite .mi,
html[data-theme="light"] .codehilite .mf,
html[data-theme="light"] .codehilite .mo,
html[data-theme="light"] .codehilite .bn,
html[data-theme="light"] .codehilite .fl {
  color: #15803d;
}

html[data-theme="light"] .codehilite .s,
html[data-theme="light"] .codehilite .s1,
html[data-theme="light"] .codehilite .s2,
html[data-theme="light"] .codehilite .sb,
html[data-theme="light"] .codehilite .sc,
html[data-theme="light"] .codehilite .se,
html[data-theme="light"] .codehilite .si,
html[data-theme="light"] .codehilite .sl,
html[data-theme="light"] .codehilite .ss,
html[data-theme="light"] .codehilite .sx {
  color: #0f766e;
}

html[data-theme="light"] .codehilite .c,
html[data-theme="light"] .codehilite .c1,
html[data-theme="light"] .codehilite .cm,
html[data-theme="light"] .codehilite .cs,
html[data-theme="light"] .codehilite .cp {
  color: #71717a;
}

html[data-theme="light"] .codehilite .nf,
html[data-theme="light"] .codehilite .fm {
  color: #1d4ed8;
}

html[data-theme="light"] .codehilite .nc,
html[data-theme="light"] .codehilite .dt,
html[data-theme="light"] .codehilite .nd {
  color: #0e7490;
}

html[data-theme="light"] .codehilite .ne {
  color: #dc2626;
}

html[data-theme="light"] .codehilite .o,
html[data-theme="light"] .codehilite .ow {
  color: #525252;
}

html[data-theme="light"] .codehilite .hll {
  background: rgba(99, 102, 241, 0.08);
}

/* ── Explicit dark mode (manual toggle overrides system light preference) ── */
html[data-theme="dark"] {
  --surface: #0a0a0b;
  --surface-raised: #141416;
  --border: #3d3d3d;
  --text-primary: #f8f8f8;
  --text-heading: #ffffff;
  --text-muted: #c0c0c0;
  --accent: #a5b4fc;
  --accent-light: #c7d2fe;
  --accent-border: rgba(165, 180, 252, 0.35);
  --accent-tag-bg: rgba(165, 180, 252, 0.08);
  --nav-blur-bg: rgba(10, 10, 11, 0.85);
}

html[data-theme="dark"] .post-header {
  border-bottom-color: #606060;
}

html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html[data-theme="dark"] .codehilite {
  border-color: #4a4a4a;
}

html[data-theme="dark"] pre code {
  border: none;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2a2a2a;
}

html[data-theme="dark"] ::selection {
  background: rgba(129, 140, 248, 0.2);
  color: var(--text-heading);
}

html[data-theme="dark"] ::-moz-selection {
  background: rgba(129, 140, 248, 0.2);
  color: var(--text-heading);
}

html[data-theme="dark"] .codehilite .k,
html[data-theme="dark"] .codehilite .kw,
html[data-theme="dark"] .codehilite .kn,
html[data-theme="dark"] .codehilite .kp,
html[data-theme="dark"] .codehilite .kr,
html[data-theme="dark"] .codehilite .kt,
html[data-theme="dark"] .codehilite .cf,
html[data-theme="dark"] .codehilite .pp,
html[data-theme="dark"] .codehilite .ot {
  color: #c7d2fe;
  font-weight: 500;
}

html[data-theme="dark"] .codehilite .dv,
html[data-theme="dark"] .codehilite .mi,
html[data-theme="dark"] .codehilite .mf,
html[data-theme="dark"] .codehilite .mo,
html[data-theme="dark"] .codehilite .bn,
html[data-theme="dark"] .codehilite .fl {
  color: #86efac;
}

html[data-theme="dark"] .codehilite .s,
html[data-theme="dark"] .codehilite .s1,
html[data-theme="dark"] .codehilite .s2,
html[data-theme="dark"] .codehilite .sb,
html[data-theme="dark"] .codehilite .sc,
html[data-theme="dark"] .codehilite .se,
html[data-theme="dark"] .codehilite .si,
html[data-theme="dark"] .codehilite .sl,
html[data-theme="dark"] .codehilite .ss,
html[data-theme="dark"] .codehilite .sx {
  color: #fdba74;
}

html[data-theme="dark"] .codehilite .c,
html[data-theme="dark"] .codehilite .c1,
html[data-theme="dark"] .codehilite .cm,
html[data-theme="dark"] .codehilite .cs,
html[data-theme="dark"] .codehilite .cp {
  color: #82828d;
  font-style: italic;
}

html[data-theme="dark"] .codehilite .nf,
html[data-theme="dark"] .codehilite .fm {
  color: #93c5fd;
}

html[data-theme="dark"] .codehilite .nc,
html[data-theme="dark"] .codehilite .dt,
html[data-theme="dark"] .codehilite .nd {
  color: #67e8f9;
}

html[data-theme="dark"] .codehilite .ne {
  color: #fca5a5;
}

html[data-theme="dark"] .codehilite .o,
html[data-theme="dark"] .codehilite .ow {
  color: #71717a;
}

html[data-theme="dark"] .codehilite .hll {
  background: rgba(129, 140, 248, 0.1);
}

/* ── Post images: invert dark-mode diagrams for light mode ── */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .post-body img {
    filter: invert(1) hue-rotate(180deg);
    border-color: transparent;
  }
}

html[data-theme="light"] .post-body img {
  filter: invert(1) hue-rotate(180deg);
  border-color: transparent;
}

/* ── Inlined SVG diagrams: dark-first palette lives in the base rules above;
   recolour for light mode here so they track the manual toggle (no invert
   filter). ── */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .post-body svg .mv,
  html:not([data-theme="dark"]) .post-body svg .lgd {
    fill: #5f5e5a;
  }

  html:not([data-theme="dark"]) .post-body svg .mvp {
    fill: #4f46e5;
  }

  html:not([data-theme="dark"]) .post-body svg .mvx,
  html:not([data-theme="dark"]) .post-body svg .pl {
    fill: #9aa1ad;
  }

  html:not([data-theme="dark"]) .post-body svg .edge {
    stroke: #afb5bf;
  }

  html:not([data-theme="dark"]) .post-body svg .edgep,
  html:not([data-theme="dark"]) .post-body svg .cut {
    stroke: #4f46e5;
  }

  html:not([data-theme="dark"]) .post-body svg .edgex {
    stroke: #9aa1ad;
  }

  html:not([data-theme="dark"]) .post-body svg .node {
    fill: #edf1f6;
    stroke: #828a94;
  }

  html:not([data-theme="dark"]) .post-body svg .nodep {
    fill: #eeedfe;
    stroke: #4f46e5;
  }

  html:not([data-theme="dark"]) .post-body svg .nodex {
    fill: #eceef1;
    stroke: #9aa1ad;
  }

  html:not([data-theme="dark"]) .post-body svg .nodenew,
  html:not([data-theme="dark"]) .post-body svg .net {
    fill: #f4f2fd;
    stroke: #818cf8;
  }

  html:not([data-theme="dark"]) .post-body svg .leaf {
    fill: #dcd9fb;
    stroke: #4f46e5;
  }

  html:not([data-theme="dark"]) .post-body svg .ring {
    stroke: #6366f1;
  }

  html:not([data-theme="dark"]) .post-body svg .edgenew,
  html:not([data-theme="dark"]) .post-body svg .edgeback {
    stroke: #6366f1;
  }

  html:not([data-theme="dark"]) .post-body svg .netl {
    stroke: #5f5e5a;
  }

  html:not([data-theme="dark"]) .post-body svg .tag {
    fill: #6366f1;
  }

  html:not([data-theme="dark"]) .post-body svg .netd {
    fill: #4f46e5;
  }

  html:not([data-theme="dark"]) .post-body svg .meter {
    fill: #e0e2e7;
  }

  html:not([data-theme="dark"]) .post-body svg .meterf {
    fill: #4f46e5;
  }
}

html[data-theme="light"] .post-body svg .mv,
html[data-theme="light"] .post-body svg .lgd {
  fill: #5f5e5a;
}

html[data-theme="light"] .post-body svg .mvp {
  fill: #4f46e5;
}

html[data-theme="light"] .post-body svg .mvx,
html[data-theme="light"] .post-body svg .pl {
  fill: #9aa1ad;
}

html[data-theme="light"] .post-body svg .edge {
  stroke: #afb5bf;
}

html[data-theme="light"] .post-body svg .edgep,
html[data-theme="light"] .post-body svg .cut {
  stroke: #4f46e5;
}

html[data-theme="light"] .post-body svg .edgex {
  stroke: #9aa1ad;
}

html[data-theme="light"] .post-body svg .node {
  fill: #edf1f6;
  stroke: #828a94;
}

html[data-theme="light"] .post-body svg .nodep {
  fill: #eeedfe;
  stroke: #4f46e5;
}

html[data-theme="light"] .post-body svg .nodex {
  fill: #eceef1;
  stroke: #9aa1ad;
}

html[data-theme="light"] .post-body svg .nodenew,
html[data-theme="light"] .post-body svg .net {
  fill: #f4f2fd;
  stroke: #818cf8;
}

html[data-theme="light"] .post-body svg .leaf {
  fill: #dcd9fb;
  stroke: #4f46e5;
}

html[data-theme="light"] .post-body svg .ring {
  stroke: #6366f1;
}

html[data-theme="light"] .post-body svg .edgenew,
html[data-theme="light"] .post-body svg .edgeback {
  stroke: #6366f1;
}

html[data-theme="light"] .post-body svg .netl {
  stroke: #5f5e5a;
}

html[data-theme="light"] .post-body svg .tag {
  fill: #6366f1;
}

html[data-theme="light"] .post-body svg .netd {
  fill: #4f46e5;
}

html[data-theme="light"] .post-body svg .meter {
  fill: #e0e2e7;
}

html[data-theme="light"] .post-body svg .meterf {
  fill: #4f46e5;
}

/* ── LaTeX-generated diagrams (dpbusd post): box/line geometry stays in the SVG,
   labels are MathJax inside <foreignObject>. Recolour the grayscale strokes and
   purple highlight fills for light mode via attribute selectors. ── */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .post-body svg [stroke="#c4c4c4"] {
    stroke: #9aa1ad;
  }

  html:not([data-theme="dark"]) .post-body svg [fill="#222540"] {
    fill: #c7d2fe;
  }

  html:not([data-theme="dark"]) .post-body svg [fill="#2b2f5e"] {
    fill: #a5b4fc;
  }
}

html[data-theme="light"] .post-body svg [stroke="#c4c4c4"] {
  stroke: #9aa1ad;
}

html[data-theme="light"] .post-body svg [fill="#222540"] {
  fill: #c7d2fe;
}

html[data-theme="light"] .post-body svg [fill="#2b2f5e"] {
  fill: #a5b4fc;
}

/* MathJax labels rendered into the diagrams' <foreignObject> cells. Colour is
   inherited from the theme, so they track light/dark automatically. */
.post-body svg foreignObject {
  overflow: visible;
}

.post-body svg .fo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-primary);
  line-height: 1;
  white-space: nowrap;
}

.post-body svg .fo.lbl {
  font-size: 11px;
}

.post-body svg .fo.res {
  font-size: 8.5px;
}

.post-body svg .fo.op {
  font-size: 17px;
}

.post-body svg .fo.dots {
  font-size: 13px;
}

.post-body svg .fo .MathJax {
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Redesign 1c — monospace-forward UI, code motifs, dot-grid hero background
   (layered on top of the base theme above)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, monospace;
  --code-green: #9ece8a;
  --dim: #5f6672;
}
html[data-theme="light"] { --code-green: #15803d; --dim: #6b7280; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) { --code-green: #15803d; --dim: #6b7280; }
}

/* — monospace chrome (headings + UI); body copy stays Fira Sans — */
nav.site-nav .nav-brand a,
nav.site-nav .nav-links a,
.section-label, .section-link,
.hero-kicker, .hero h1, .hero-actions .btn, .hero-actions .btn-inline,
.page-title, .post-header h1, .post-item h3, .project-card h3,
.post-num, .toc-label, .toc-inner .toc a, .post-nav-label, .footer-inner {
  font-family: var(--font-mono);
}

/* — nav — */
header.site-header { border-bottom: 1px solid var(--border); }
nav.site-nav .nav-links { margin-left: auto; }
nav.site-nav .nav-end { margin-left: 1.5rem; }
nav.site-nav .nav-links a { text-transform: lowercase; letter-spacing: 0; }
/* home: projects + blog live in the hero, so trim them from the header */
body[data-page="index"] .nav-links li:nth-child(1),
body[data-page="index"] .nav-links li:nth-child(2) { display: none; }

/* — section labels rendered as // comments — */
.section-label {
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--dim);
}
.section-label::before { content: "// "; }

/* — hero — */
.hero { padding-top: 7rem; }
.hero-kicker {
  font-size: 0.85rem;
  color: var(--dim);
  letter-spacing: 0.02em;
  margin-bottom: 1.15rem;
}
.hero-prompt { color: var(--code-green); }
.hero h1 {
  color: var(--text-heading);
  font-size: clamp(2.5rem, 6vw, 3.4rem);
}
.hero .hero-op { color: var(--accent); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}
/* the hero buttons are defined with the terminal states at the end — */
.btn-inline { font-size: 0.8rem; color: var(--dim); }
.btn-inline:hover { color: var(--accent-light); }

/* — numbered post list (top number = total; counts down) — */
.post-item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  align-items: start;
}
.post-num { color: #3f3f46; font-size: 0.8rem; padding-top: 0.5rem; }
.post-item h3 { font-weight: 500; }

/* — post reading view: # headings, $ byline, // contents — */
.post-body h1, .post-body h2 { font-family: var(--font-mono); font-weight: 500; }
.post-body h1::before, .post-body h2::before { content: "# "; color: var(--dim); }
.post-header .byline::before { content: "$ "; color: var(--code-green); }
.toc-label { text-transform: lowercase; letter-spacing: 0; }
.toc-label::before { content: "// "; }

/* — projects: scalable auto-fill grid + code-flavoured cards — */
.index-grid { grid-template-columns: 1.5fr 1fr; }
.projects-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.projects-page-grid {
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 0.9rem;
}
.project-card { aspect-ratio: auto; min-height: 170px; }
.project-card h3::after { content: " { }"; color: #3f3f46; font-weight: 400; }
.project-card .card-tag {
  font-family: var(--font-mono);
  color: var(--code-green);
  background: none;
}

/* — footer $ prompt — */
.footer-inner { letter-spacing: 0; }
.footer-inner > span:first-child::before { content: "$ "; color: var(--code-green); }

/* re-assert responsive stacking + left-aligned hero buttons — these must come
   last in the file so they win over the base .index-grid / .projects-page-grid
   / .hero-actions declarations above at the same specificity */
@media (max-width: 1100px) {
  .post-layout { grid-template-columns: 1fr; gap: 0; }
  .index-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .projects-page-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .projects-page-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .hero-actions .btn { justify-content: center; }
  .hero-actions .btn-inline { margin-top: 0.2rem; }
}

/* — dot-grid background (index only); canvas painted in main.js — */
.dot-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: none;
  pointer-events: none;
}
html { background: var(--surface); }
body[data-page="index"] { background: transparent; }
body[data-page="index"] .dot-bg { display: block; }
body[data-page="index"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(125% 85% at 46% 32%,
    transparent 0%, rgba(10, 10, 11, 0.30) 55%, rgba(10, 10, 11, 0.72) 100%);
}
html[data-theme="light"] body[data-page="index"]::before {
  background: radial-gradient(125% 85% at 46% 32%,
    transparent 0%, rgba(241, 242, 245, 0.35) 55%, rgba(241, 242, 245, 0.82) 100%);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) body[data-page="index"]::before {
    background: radial-gradient(125% 85% at 46% 32%,
      transparent 0%, rgba(241, 242, 245, 0.35) 55%, rgba(241, 242, 245, 0.82) 100%);
  }
}

/* — fenced code blocks as terminal windows (dots bar) — */
.codehilite::before {
  content: "";
  display: block;
  height: 38px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 20px 19px, #34343a 4.5px, transparent 5px),
    radial-gradient(circle at 38px 19px, #34343a 4.5px, transparent 5px),
    radial-gradient(circle at 56px 19px, #34343a 4.5px, transparent 5px),
    #111113;
}
html[data-theme="light"] .codehilite::before {
  background:
    radial-gradient(circle at 20px 19px, #c7cad3 4.5px, transparent 5px),
    radial-gradient(circle at 38px 19px, #c7cad3 4.5px, transparent 5px),
    radial-gradient(circle at 56px 19px, #c7cad3 4.5px, transparent 5px),
    #e8eaef;
  border-bottom-color: #b7bcc6;
}
html[data-theme="light"] .copy-btn {
  border-color: #b7bcc6;
}
html[data-theme="light"] .search-btn {
  background: #e8eaef;
  border-color: #b7bcc6;
}
html[data-theme="light"] .search-panel {
  background: #e8eaef;
  border-color: #b7bcc6;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .codehilite::before {
    background:
      radial-gradient(circle at 20px 19px, #c7cad3 4.5px, transparent 5px),
      radial-gradient(circle at 38px 19px, #c7cad3 4.5px, transparent 5px),
      radial-gradient(circle at 56px 19px, #c7cad3 4.5px, transparent 5px),
      #e8eaef;
    border-bottom-color: #b7bcc6;
  }

  html:not([data-theme="dark"]) .copy-btn {
    border-color: #b7bcc6;
  }

  html:not([data-theme="dark"]) .search-btn {
    background: #e8eaef;
    border-color: #b7bcc6;
  }

  html:not([data-theme="dark"]) .search-panel {
    background: #e8eaef;
    border-color: #b7bcc6;
  }
}

.codehilite { position: relative; }
.copy-btn {
  position: absolute;
  top: 7px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  z-index: 1;
}
.copy-btn:hover { color: var(--accent-light); border-color: var(--accent-border); }

/* — reading progress bar — */
.reading-progress {
  position: fixed;
  top: 4rem;
  left: 0;
  height: 1px;
  width: 0%;
  background: var(--accent);
  z-index: 55;
  transition: width 0.1s linear;
}
body[data-page="post"] .reading-progress,
body[data-page="page"] .reading-progress { display: block; }
body:not([data-page="post"]) .reading-progress { display: none; }

/* — back to top — */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-light);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 40;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* — search button + cmd+k overlay — */
.search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.search-btn kbd, .search-input-row kbd {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  color: var(--dim);
}
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 7, 0.72);
  z-index: 80;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.search-overlay.open { display: flex; }
.search-panel {
  width: min(480px, 90vw);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.search-prompt { color: var(--code-green); font-family: var(--font-mono); font-size: 13px; }
.search-input-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-heading);
  font-family: var(--font-mono);
  font-size: 13px;
}
.search-results { padding: 6px 0; max-height: 50vh; overflow-y: auto; }
.search-result {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
}
.search-result:hover { background: rgba(165, 180, 252, 0.06); color: var(--accent-light); }
.search-result.active { background: rgba(165, 180, 252, 0.1); color: var(--accent-light); }
.search-result-kind { color: var(--dim); font-size: 11px; font-family: var(--font-mono); }
.search-empty { padding: 16px; color: var(--dim); font-size: 13px; text-align: center; }

/* — inner pages: kicker, monospace # headings, mono tag chips — */
.page-kicker {
  font-family: var(--font-mono);
  color: var(--dim);
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
}
.page-wrap h2, .page-wrap h3 { font-family: var(--font-mono); font-weight: 500; }
.page-wrap h2::before { content: "# "; color: var(--dim); }
.tag { font-family: var(--font-mono); }


/* ── Citation block ── */
.post-cite {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.post-cite .cite-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: 'Fira Code', ui-monospace, monospace;
  margin-bottom: 0.75rem;
}

.cite-block {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.75;
  overflow: hidden;
}

.cite-block .cite-titlebar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.cite-block .cite-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
}

.cite-block .cite-filename {
  margin-left: 0.5rem;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.cite-block .cite-copy {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.2rem 0.6rem;
  color: var(--text-muted);
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.7rem;
  cursor: pointer;
}

.cite-block pre {
  margin: 0;
  border: none;
  background: transparent;
  padding: 0.9rem 1rem;
  font-size: 0.75rem;
  line-height: 1.75;
  white-space: pre-wrap;
}

/* — wider containers, more-indented hero, larger body copy — */
nav.site-nav, .content-width, .footer-inner, .page-wrap--wide {
  max-width: 1440px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.page-wrap { max-width: 900px; }
.post-layout {
  max-width: 1360px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.hero { padding-left: 2rem; }
.hero h1 { font-size: clamp(2.9rem, 6.5vw, 3.9rem); }
.hero .hero-body { font-size: 1.05rem; }
.hero-actions .btn, .hero-actions .btn-inline { font-size: 0.9rem; }
.post-item h3 { font-size: 1.02rem; }
.page-title, .post-header h1 { font-size: clamp(1.75rem, 3.4vw, 2.05rem); }
.post-body { font-size: 1.05rem; }
.post-body h2 { font-size: 1.25rem; }
.post-body h3 { font-size: 1.05rem; }

/* — blog listing: header row, featured post — */
.page-header-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 2rem; }
.page-header-row .page-title { margin: 0; }
.post-featured {
  display: block;
  padding-bottom: 2rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.post-featured-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 0.9rem; }
.post-featured-kicker .section-label { color: var(--accent-light); }
.post-featured-meta { color: var(--dim); font-size: 0.8rem; }
.post-featured h2 { font-size: 1.75rem; font-weight: 600; color: var(--text-heading); line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.post-featured-desc { font-family: 'Fira Sans', system-ui, sans-serif; font-size: 0.98rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 1rem; max-width: 640px; }
.post-featured-cta { color: var(--accent-light); font-size: 0.85rem; }

/* — reading view: post title block — */

/* — project cards: no fill, no box. corner brackets (below) mark the bounds
   instead, and they extend + brighten on hover — */
.project-card,
.project-card--full,
html[data-theme="light"] .project-card,
html:not([data-theme="dark"]) .project-card {
  position: relative;
  /* background-color, not the shorthand: these theme selectors outrank the
     motif rule below, and `background:` would reset its bracket gradients */
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 1.25rem 1.35rem;
}

.project-card:hover {
  background-color: transparent;
  box-shadow: none;
}

.project-card:hover h3::after {
  color: var(--accent);
}

/* — layout pass: tighter side gutters on inner pages, bigger project-card copy,
   bigger site header. must stay last in the file so it wins at equal
   specificity — */

/* narrower side padding on every page except the index (which keeps
   .content-width); nav + footer are shared chrome, so they're left alone */
.page-wrap,
.page-wrap--wide,
.post-layout {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (max-width: 560px) {
  .page-wrap,
  .page-wrap--wide,
  .post-layout {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* the about page sits flush against the left of the viewport instead of being
   centred; its prose stays justified */
body[data-page="about"] .page-wrap {
  max-width: 1440px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* the container spans the site's full column so the block sits hard left,
   flush under the nav brand; the copy itself keeps a readable measure */
body[data-page="about"] .page-wrap > * {
  max-width: 900px;
}

body[data-page="about"] .page-wrap p,
body[data-page="about"] .page-wrap li {
  text-align: justify;
  hyphens: auto;
}

/* — site header: larger — */
nav.site-nav { height: 4rem; }
nav.site-nav .nav-brand a { font-size: 1.25rem; }
nav.site-nav .nav-links { gap: 1.75rem; }
nav.site-nav .nav-links a { font-size: 0.92rem; }
.theme-toggle { font-size: 1.15rem; }
.search-btn { font-size: 13px; padding: 7px 11px; }

/* — project cards: larger text — */
.project-card h3 { font-size: 0.98rem; }
.project-card .card-desc { font-size: 0.85rem; line-height: 1.45; }
.project-card .card-tag { font-size: 0.7rem; }
.card-gh-link { font-size: 0.74rem; }
.project-card--full h3 { font-size: 1.02rem; }
.project-card--full .card-desc { font-size: 0.85rem; }


/* drawer sits flush under the taller header */
@media (max-width: 1100px) {
  .post-toc { top: calc(4rem + 1px); }
}


/* ── corner-bracket motif ────────────────────────────────────────────────────
   the 3px vertical accent bar is gone everywhere; framed blocks are marked by
   four corner ticks instead. drawn with background gradients rather than
   pseudo-elements because ::before is already spoken for on blockquotes (quote
   glyph) and callouts (labels) — one mechanism for every block. each corner is
   an arm pair, so eight gradients in all. — */

.project-card,
.post-header,
.post-featured,
blockquote,
.post-body details,
.post-body .aside-note,
pre,
.codehilite,
.search-panel,
.hero-actions .btn,
.theorem, .lemma, .corollary,
.proof, .definition, .remark, .example {
  /* dimmed: four corners on every block is a lot of accent ink at full
     strength. first declaration is the fallback where color-mix is missing */
  --bracket: var(--accent-border);
  --bracket: color-mix(in srgb, var(--accent) 55%, transparent);
  --bracket-len: 22px;
  position: relative;
  border-radius: 0;
  background-image:
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket));
  background-repeat: no-repeat;
  background-size:
    var(--bracket-len) 1px, 1px var(--bracket-len),
    var(--bracket-len) 1px, 1px var(--bracket-len),
    var(--bracket-len) 1px, 1px var(--bracket-len),
    var(--bracket-len) 1px, 1px var(--bracket-len);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  transition: background-size 0.2s ease;
}

/* only the ex-bar blocks lose their left edge — bordered boxes keep theirs */
blockquote,
.post-body .aside-note,
.theorem, .lemma, .corollary,
.proof, .definition, .remark, .example {
  border-left: none;
}

/* muted blocks keep their muted marking, as the old bars did */
.proof, .definition, .remark, .example {
  --bracket: var(--border);
}

.lemma, .corollary {
  --bracket: rgba(99, 102, 241, 0.55);
}

blockquote {
  padding: 1.25rem 1.5rem;
}

/* the quote glyph moves clear of the top-left tick */
blockquote::before {
  top: 0.4rem;
  left: 1.6rem;
}

.post-body details {
  border: 1px solid var(--border);
}

.post-body .aside-note {
  --bracket: var(--border);
  --bracket-len: 12px;
  padding: 0.5rem 0.75rem;
}

/* — cards: longer ticks that extend and brighten on hover — */
.project-card {
  --bracket-len: 24px;
}

.project-card:hover {
  --bracket-len: 38px;
  --bracket: var(--accent);
}

/* — header blocks: the divider is gone, the frame separates them instead — */
.post-header,
.post-featured {
  /* the ticks sit on the block's edges, so the text needs clearance on both
     axes — without padding-top the heading collides with the top arm */
  padding: 1rem 1.6rem 0.7rem;
  border-bottom: none;
}

.post-header {
  margin-bottom: 2.6rem;
}

.post-featured {
  margin-bottom: 2rem;
}

.post-featured:hover {
  --bracket-len: 34px;
}


/* ── square edges ────────────────────────────────────────────────────────────
   no pills, no rounded boxes anywhere — the corner-bracket motif above only
   reads as deliberate if the rest of the chrome shares its geometry. — */

.theme-toggle,
.nav-menu-btn,
.nav-menu-btn span,
.toc-toggle,
.btn,
.copy-btn,
.back-to-top,
.search-btn,
.search-btn kbd,
.search-input-row kbd,
.search-panel,
.cite-block,
.cite-block .cite-copy,
.cite-block .cite-dot,
code,
pre,
.codehilite,
table,
::-webkit-scrollbar-thumb {
  border-radius: 0;
}

/* — tags: the pill is gone. mono text in brackets instead, in the same family
   as the // kickers, the $ prompts and the { } after card titles — */
.tag,
.post-item .tag,
.post-header .tag,
.project-card .card-tag {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-mono);
}

.tag::before,
.post-item .tag::before,
.post-header .tag::before,
.project-card .card-tag::before {
  content: "[";
  opacity: 0.5;
}

.tag::after,
.post-item .tag::after,
.post-header .tag::after,
.project-card .card-tag::after {
  content: "]";
  opacity: 0.5;
}

/* chips carried their own padding; the list needs the spacing back */
.tag-list,
.post-item .tag-list,
.post-header .tag-list {
  gap: 0.75rem;
}


/* ── terminal states ─────────────────────────────────────────────────────────
   no shadows and nothing lifts off the page. code blocks, the search panel and
   the buttons take the corner-tick motif above; interactive things invert on
   hover the way a selected line does in a terminal. — */

/* .codehilite::before is an opaque terminal titlebar painted over the top of
   the box, which buried the two top ticks. so the ticks move off the element's
   own background onto an overlay layer that sits above the titlebar. the
   element is already position: relative and overflow: hidden. */
.codehilite {
  background-image: none;
}

.codehilite::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket));
  background-repeat: no-repeat;
  background-size:
    var(--bracket-len) 1px, 1px var(--bracket-len),
    var(--bracket-len) 1px, 1px var(--bracket-len),
    var(--bracket-len) 1px, 1px var(--bracket-len),
    var(--bracket-len) 1px, 1px var(--bracket-len);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* the inner pre must not repeat what the wrapper draws */
.codehilite pre {
  background-image: none;
}

/* the titlebar's dots were the last round things on the site */
.codehilite::before {
  background:
    linear-gradient(#34343a, #34343a) 15px 14px / 9px 9px no-repeat,
    linear-gradient(#34343a, #34343a) 33px 14px / 9px 9px no-repeat,
    linear-gradient(#34343a, #34343a) 51px 14px / 9px 9px no-repeat,
    #111113;
}

/* the :not([data-theme="dark"]) half only applies under a light system
   preference — unguarded it would light up the default dark theme too */
html[data-theme="light"] .codehilite::before {
  background:
    linear-gradient(#c7cad3, #c7cad3) 15px 14px / 9px 9px no-repeat,
    linear-gradient(#c7cad3, #c7cad3) 33px 14px / 9px 9px no-repeat,
    linear-gradient(#c7cad3, #c7cad3) 51px 14px / 9px 9px no-repeat,
    #e8eaef;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .codehilite::before {
    background:
      linear-gradient(#c7cad3, #c7cad3) 15px 14px / 9px 9px no-repeat,
      linear-gradient(#c7cad3, #c7cad3) 33px 14px / 9px 9px no-repeat,
      linear-gradient(#c7cad3, #c7cad3) 51px 14px / 9px 9px no-repeat,
      #e8eaef;
  }
}

/* — hero actions: not buttons at all. each one is a prompt line — a green $,
     a mono command, and a rule underneath that types itself in left-to-right
     on hover. the primary keeps its rule drawn at rest, which is the whole of
     the hierarchy between the two. — */
.hero-actions {
  gap: 2rem;
}

.hero-actions .btn {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: none;
  /* background-color, not the shorthand — `background: none` would wipe the
     bracket gradients this rule inherits from the motif */
  background-color: transparent;
  font-family: var(--font-mono);
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease, background-size 0.2s ease;
}

.hero-actions .btn::before {
  content: "$";
  color: var(--code-green);
}

/* the primary is bracketed at rest; the ghost's ticks grow out of nothing on
   hover, which is the whole of the hierarchy between the two */
.hero-actions .btn--primary {
  --bracket-len: 12px;
  color: var(--accent-light);
}

.hero-actions .btn--ghost {
  --bracket-len: 0px;
}

.hero-actions .btn--ghost:hover {
  --bracket-len: 12px;
}

.hero-actions .btn--ghost {
  color: var(--text-muted);
}

.hero-actions .btn:hover {
  color: var(--accent-light);
}

.hero-actions .btn .btn-arrow {
  transition: transform 0.2s ease;
}

.hero-actions .btn:hover .btn-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-actions .btn::after,
  .hero-actions .btn .btn-arrow {
    transition: none;
  }
}

/* — small actions read as bracketed commands, like the tags — */
.copy-btn {
  border: none;
  background: none;
  padding: 0;
  top: 10px;
}

.copy-btn::before { content: "["; opacity: 0.5; }
.copy-btn::after { content: "]"; opacity: 0.5; }
.copy-btn:hover { color: var(--accent-light); }

.search-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  color: var(--dim);
  transition: color 0.15s;
}

.search-btn::before {
  content: "$";
  color: var(--code-green);
}

.search-btn:hover {
  color: var(--accent-light);
}

.search-btn kbd,
.search-input-row kbd {
  border: none;
  background: none;
  padding: 0;
}

.search-btn kbd::before,
.search-input-row kbd::before { content: "["; opacity: 0.5; }
.search-btn kbd::after,
.search-input-row kbd::after { content: "]"; opacity: 0.5; }

/* — search results invert on hover/keyboard focus, same as the buttons — */
.search-result:hover,
.search-result.active {
  background: var(--accent);
  color: var(--surface);
}

.search-result:hover .search-result-kind,
.search-result.active .search-result-kind {
  color: var(--surface);
  opacity: 0.7;
}