/* Site palette is tuned to the circuit board: emerald/mint accent + gold, so the
   rail and the page read as one design. */
:root {
  --bg: #ffffff;
  --fg: #15211c;
  --muted: #5c6b63;
  --accent: #0e9f6e;
  --gold: #b5841f;
  --border: #e2e8e4;
  --code-bg: #f3f6f4;
  --label-bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1311;
    --fg: #e4ece8;
    --muted: #8ea096;
    --accent: #43d49b;
    --gold: #e3b341;
    --border: #1e2a24;
    --code-bg: #101a16;
    --label-bg: #14201b;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 720px;
  padding: 0 1.25rem;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}
.site-title { font-weight: 700; font-size: 1.1rem; color: var(--fg); }
.site-header nav a { margin-left: 1rem; color: var(--muted); font-size: .95rem; }

main { padding: 2.5rem 0; min-height: 60vh; }

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.8rem; }

time, .post-meta, .desc { color: var(--muted); }
.post-meta { font-size: .9rem; margin-top: -.5rem; }
.desc { margin: .2rem 0 0; font-size: .95rem; }

.post-list { list-style: none; padding: 0; }
.post-list li { margin: .9rem 0; }
.post-list time { font-size: .85rem; font-variant-numeric: tabular-nums; margin-left: .4rem; }

.tag {
  font-size: .8rem;
  background: var(--code-bg);
  padding: .1rem .45rem;
  border-radius: .35rem;
  color: var(--gold);
  border: 1px solid var(--border);
}

code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
:not(pre) > code { background: var(--code-bg); padding: .15rem .35rem; border-radius: .35rem; }
pre {
  padding: 1rem;
  border-radius: .5rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--code-bg);
}
pre code { background: none; padding: 0; }
.highlight { border-radius: .5rem; }
.highlight pre { margin: 0; border: 1px solid var(--border); }

blockquote {
  margin: 1rem 0;
  padding: .25rem 1rem;
  border-left: 3px solid var(--border);
  color: var(--muted);
}

img { max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--border); padding: .4rem .6rem; text-align: left; }
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

.post-body > * + * { margin-top: 1rem; }
.post-body h2 { margin-top: 2rem; }
.post-back { margin-top: 2.5rem; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  color: var(--muted);
  font-size: .9rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.site-footer .links a { margin-left: 1rem; }

/* --- Circuit-board article rail (fixed, left edge) --- */
.circuit { /* scroll container: hovering the rail scrolls the (taller) board */
  position: fixed;
  left: 0;
  top: 0;
  width: 270px;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  pointer-events: auto;
  z-index: 20;
  scrollbar-width: none; /* hide scrollbar (Firefox); scroll on hover */
}
.circuit::-webkit-scrollbar { display: none; } /* hide scrollbar (WebKit) */
.circuit-rail {
  /* The board: a dark-green PCB strip with a drill-hole grid, copper traces and
     gold vias. Height is set inline from the post count, so it's taller than the
     viewport and scrolls. The right part of .circuit is transparent (chip space). */
  position: relative;
  width: 130px;
  --board: #0b241a;
  --drill: rgba(210, 255, 230, .05);
  --trace: #2f9e6e;
  --trace-bright: #43d49b;
  --via: #e3b341;
  --via-active: #ffd76a;
  background:
    radial-gradient(circle, var(--drill) 1.1px, transparent 1.6px) 0 0 / 13px 13px,
    var(--board);
}
.circuit-svg { position: absolute; top: 0; left: 0; } /* 1:1, true 45-degree traces */
.trace { stroke: var(--trace); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace.bus     { stroke: var(--trace-bright); stroke-width: 3; opacity: .9; filter: drop-shadow(0 0 1.4px var(--trace-bright)); }
.trace.bus.dim { stroke: var(--trace); stroke-width: 2; opacity: .5; filter: none; }
.trace.tap     { stroke: var(--trace-bright); stroke-width: 2; opacity: .85; }
.trace.faint   { stroke-width: 1; opacity: .32; }
.smd { fill: var(--via); opacity: .5; }
.comp { fill: #0e2c20; stroke: var(--trace); stroke-width: 1; opacity: .85; }
.comp-line { stroke: var(--trace-bright); stroke-width: 1.6; opacity: .7; }
.via-deco { fill: var(--board); stroke: var(--trace); stroke-width: 1.4; opacity: .65; }
.node { /* absolutely placed on its via (x,y) */
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  text-decoration: none;
}
.node:hover { text-decoration: none; }
.pad { /* gold via: copper ring around a board-colored hole */
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--board);
  border: 3px solid var(--via);
  box-shadow: 0 0 0 3px var(--board); /* knock out the trace behind the via */
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.node:hover .pad,
.node.is-active .pad {
  border-color: var(--via-active);
  background: var(--via-active);
  box-shadow: 0 0 0 3px var(--board), 0 0 12px var(--via-active);
}
.node-label { /* hover/active chip, always opens to the right (rail hugs the edge) */
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  display: flex;
  flex-direction: column;
  gap: .1rem;
  width: max-content;
  max-width: 150px; /* wrap long titles; chip stays inside the scroll container */
  padding: .4rem .65rem;
  background: var(--label-bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 2;
}
.node-label::before { /* gold lead from the via to the chip */
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--via);
  transform: translateY(-50%);
}
.node:hover .node-label,
.node:focus-within .node-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.node-title { font-weight: 600; font-size: .85rem; color: var(--fg); }
.node-date  { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 1260px) {
  .circuit { display: none; } /* no room beside the centered column */
}
@media (prefers-reduced-motion: reduce) {
  .pad, .node-label { transition: none; }
}