@font-face {
  font-family: 'Maecenas';
  src: url('/fonts/fonts/fonnts.com-Maecenas-.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maecenas';
  src: url('/fonts/fonts/fonnts.com-Maecenas-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Maecenas';
  src: url('/fonts/fonts/fonnts.com-Maecenas-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maecenas';
  src: url('/fonts/fonts/fonnts.com-Maecenas-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

body {
  background: #fafafa;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 72px 20px;
  font-family: 'Mundo Serif', Georgia, serif;
  font-weight: 200;
  color: #4a4a4a;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.page {
  max-width: 1160px;
  width: 100%;
}

.name {
  font-family: 'Maecenas', Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: -0.5px;
  margin-bottom: 28px;
}

.name a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

.layout {
  display: grid;
  /* below 1160px: sidebar + flexible content (no right spacer, content fills) */
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
}

@media (min-width: 1160px) {
  /* once the page can fit the full symmetric layout, balance with right spacer
     so text-centre lands at page-centre */
  .layout {
    grid-template-columns: 220px minmax(0, 720px) 220px;
  }
}

.sidebar {
  width: 180px;
  flex-shrink: 0;
  padding-right: 20px;
  padding-top: 28px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar-section {
  margin-bottom: 28px;
}

.sidebar-link {
  display: block;
  font-size: 17px;
  line-height: 1.7;
  color: #888;
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s;
}

.sidebar-link:hover {
  color: #4a4a4a;
}

.sidebar-link.active {
  color: #4a4a4a;
}

.sidebar-toc {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #ececec;
  font-size: 13px;
}

.sidebar-toc-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0b0b0;
  padding-left: 14px;
  margin-bottom: 14px;
}

.sidebar-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  border-left: 1px solid #e8e8e8;
}

.sidebar-toc-item {
  margin: 0;
}

.sidebar-toc-link {
  display: block;
  padding: 8px 0 8px 14px;
  font-size: 14px;
  line-height: 1.4;
  color: #c8c8c8;
  border-bottom: none;
  transition: color 0.18s ease;
  cursor: pointer;
}

.sidebar-toc-link:hover {
  color: #4a4a4a;
  border-bottom: none;
}

.sidebar-toc-link.passed {
  color: #999;
}

.sidebar-toc-link.current {
  color: #1a1a1a;
  font-weight: 500;
}

.sidebar-toc-link[href="#comparison"] {
  font-style: italic;
}

.sidebar-toc-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-toc-item.is-current .sidebar-toc-sublist {
  max-height: 200px;
}

.sidebar-toc-subitem {
  margin: 0;
}

.sidebar-toc-sublink {
  display: block;
  padding: 5px 0 5px 28px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
  color: #c8c8c8;
  border-bottom: none;
  transition: color 0.18s ease;
  cursor: pointer;
}

.sidebar-toc-sublink:hover {
  color: #4a4a4a;
  border-bottom: none;
}

.sidebar-toc-sublink.current {
  color: #1a1a1a;
  font-weight: 500;
}

.sidebar-toc-link.has-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-toc-logo {
  display: inline-block;
  height: 16px;
  width: 16px;
  flex-shrink: 0;
  border-radius: 3px;
  border-bottom: none;
  opacity: 0.55;
  transition: opacity 0.18s ease;
}

.sidebar-toc-logo.is-tight {
  height: 11px;
  width: 16px;
  object-fit: contain;
  object-position: center;
}

.sidebar-toc-logo.is-mid {
  height: 13px;
  width: 16px;
  object-fit: contain;
  object-position: center;
}

[data-theme="dark"] .sidebar-toc-logo.is-mono {
  filter: invert(1);
}

.sidebar-toc-link:hover .sidebar-toc-logo,
.sidebar-toc-link.current .sidebar-toc-logo {
  opacity: 1;
}

.sidebar-toc-link.passed .sidebar-toc-logo {
  opacity: 0.7;
}

.sidebar-toc-indicator {
  position: absolute;
  left: -1px;
  width: 2px;
  background: #1a1a1a;
  border-radius: 1px;
  opacity: 0;
  transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease;
  pointer-events: none;
}

.sidebar-toc-indicator.is-visible {
  opacity: 1;
}

.sidebar-toc-sub-indicator {
  position: absolute;
  left: -1px;
  width: 2px;
  background: #1a1a1a;
  border-radius: 1px;
  opacity: 0;
  transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease;
  pointer-events: none;
}

.sidebar-toc-sub-indicator.is-visible {
  opacity: 0.5;
}

.sidebar-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-logo {
  display: block;
  width: 18px;
  height: 18px;
  color: #bbb;
  border-bottom: none;
  transition: color 0.2s;
}

.social-logo:hover {
  color: #4a4a4a;
  border-bottom: none;
}

.social-logo svg {
  width: 100%;
  height: 100%;
}

.content {
  min-width: 0;
  font-size: 16px;
  line-height: 1.8;
}

/* home page: shrink content to its widest line so text-midpoint
   (not bounding-box midpoint) lands at column centre */
.content.home {
  width: max-content;
  max-width: 100%;
  justify-self: center;
}

a {
  color: #4a4a4a;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  transition: border-color 0.2s;
}

a:hover {
  border-bottom-color: #4a4a4a;
}

/* glossary anchors — hoverable definitions, not navigable */
a:not([href]) {
  border-bottom: 1px dotted #bbb;
  cursor: pointer;
}

a:not([href]):hover {
  border-bottom-color: #4a4a4a;
}

/* popup-style anchors that wrap a KaTeX formula don't get an underline —
   the dotted line clashes visually with the rendered equation */
.article-body a:has(.katex),
.article-body a:has(.katex):hover {
  border-bottom: none;
}

/* home page */

.section-title {
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  color: #1a1a1a;
  margin-top: 28px;
  margin-bottom: 4px;
}

.topline {
  font-style: italic;
  color: #1a1a1a;
  margin-bottom: 4px;
}

[data-theme="dark"] .topline {
  color: #e8e4d8;
}

.section-title:first-child {
  margin-top: 0;
}

.item {
  padding-left: 18px;
  position: relative;
}

.item::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: #ccc;
}

.projects .item {
  margin-bottom: 2px;
}

.place-apple {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: #4a4a4a;
  border-bottom: 1px solid #ddd;
  transition: color 0.2s, border-color 0.2s;
}

.place-apple:hover {
  color: #1a1a1a;
  border-bottom-color: #4a4a4a;
}

.place-apple svg {
  width: 22px;
  height: 22px;
  display: block;
  position: relative;
  top: -3px;
}

.place-role {
  color: #888;
  font-size: 14px;
  font-style: italic;
  margin-left: 4px;
  position: relative;
  top: 2px;
}

[data-theme="dark"] .place-role {
  color: #a09a8e;
}

[data-theme="dark"] .place-apple {
  color: #d0cabe;
  border-bottom-color: #3a3833;
}

[data-theme="dark"] .place-apple:hover {
  color: #e8e4d8;
  border-bottom-color: #e8e4d8;
}

.project-name {
  font-weight: 400;
  font-style: italic;
}

.project-date {
  font-size: 13px;
  color: #aaa;
  margin-top: 2px;
}

.project-links {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.project-link-icon {
  display: block;
  width: 16px;
  height: 16px;
  color: #bbb;
  border-bottom: none;
  transition: color 0.2s;
}

.project-link-icon:hover {
  color: #4a4a4a;
  border-bottom: none;
}

.project-link-icon svg {
  width: 100%;
  height: 100%;
}

.project-ext {
  font-size: 12px;
  color: #bbb;
  margin-left: 6px;
  border-bottom: none;
  text-decoration: none;
  transition: color 0.2s;
}

.project-ext:hover {
  color: #888;
  border-bottom: none;
}

.project-ref {
  font-size: 13px;
  color: #aaa;
}

.project-ref a {
  color: #aaa;
  border-bottom: none;
}

.project-ref a:hover {
  color: #4a4a4a;
}

.item-ref {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-left: 18px;
  position: relative;
}

.item-ref::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: #ccc;
}

.item-ref .ref {
  font-size: 13px;
  color: #aaa;
  white-space: nowrap;
  margin-left: 16px;
}

.item-ref .ref a {
  color: #aaa;
  border-bottom: none;
}

.item-ref .ref a:hover {
  color: #4a4a4a;
}

/* ascii wave */

.ascii-wave {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.2;
  color: #d0d0d0;
  margin-top: 60px;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  white-space: pre;
}

.divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 28px 0;
}

/* ambient ASCII sketch — a GEMM mapped onto a systolic array, pencilled into
   the homepage's right-hand margin. No frame: the page background is the paper.
   The hand-drawn feel comes from the soft graphite stroke. Fixed width so it
   doesn't shift as the animation reflows. */
.chip-sketch {
  display: none; /* only shown once the 3-column layout has a right margin */
  margin: 0;
}

@media (min-width: 1160px) {
  .chip-sketch {
    display: block;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    margin-top: 56px;
    width: 300px;
    transform: translateX(80px); /* nudge into the right margin */
  }
}

.chip-array {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #9d9a90; /* graphite pencil */
  text-shadow: 0 0 0.6px currentColor; /* soft, hand-drawn stroke */
  margin: 0;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  white-space: pre;
}

/* the roofline chart sits directly below the systolic array, in the same
   right-margin figure (overrides the in-article .roofline-chart layout) */
.chip-sketch .roofline-chart {
  width: 264px;
  max-width: 264px;
  margin: 22px 0 0;
  transform: none;
}

/* soft colour shading under the roofline: warm = memory-bound, green = compute-bound */
.chip-sketch .roofline-chart .rl-fill-mem { fill: #c46a3a; opacity: 0.13; stroke: none; }
.chip-sketch .roofline-chart .rl-fill-cmp { fill: #5a8a4a; opacity: 0.13; stroke: none; }
[data-theme="dark"] .chip-sketch .roofline-chart .rl-fill-mem { fill: #d88a5a; opacity: 0.2; }
[data-theme="dark"] .chip-sketch .roofline-chart .rl-fill-cmp { fill: #8aaa78; opacity: 0.2; }

/* list pages (writing, projects) */

.article-item,
.project-item {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.article-item:first-child,
.project-item:first-child {
  border-top: 1px solid #e8e8e8;
  padding-top: 16px;
}

.article-title,
.project-title {
  font-weight: 400;
  font-size: 16px;
}

.article-title a,
.project-title a {
  color: #4a4a4a;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  transition: border-color 0.2s;
}

.article-title a:hover,
.project-title a:hover {
  border-bottom-color: #4a4a4a;
}

.article-date,
.project-desc {
  font-size: 14px;
  color: #888;
}

/* article pages */

.article-header {
  margin-bottom: 28px;
}

.article-header .article-title {
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.article-header .article-date {
  font-size: 13px;
  color: #aaa;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-links {
  display: flex;
  gap: 8px;
}

.article-link-icon {
  display: block;
  width: 14px;
  height: 14px;
  color: #bbb;
  border-bottom: none;
  transition: color 0.2s;
  position: relative;
  top: -4.5px;
}

.article-link-icon:hover {
  color: #4a4a4a;
  border-bottom: none;
}

.article-link-icon svg {
  width: 100%;
  height: 100%;
}

.article-body code {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
  font-size: 0.84em;
  color: #3a3a3a;
  background: #f0efeb;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: -0.01em;
}

.article-body pre {
  background: #f0efeb;
  padding: 16px 20px;
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: 20px;
}

.article-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.82em;
  line-height: 1.6;
}

/* highlight.js token colors — light theme (palette matches .code-modal) */
.article-body pre code.hljs { color: #3a3a3a; background: none; }
.article-body .hljs-comment,
.article-body .hljs-quote { color: #5a9a5a; font-style: italic; }
.article-body .hljs-keyword,
.article-body .hljs-selector-tag,
.article-body .hljs-literal,
.article-body .hljs-section,
.article-body .hljs-doctag,
.article-body .hljs-name { color: #7b5ea7; }
.article-body .hljs-type,
.article-body .hljs-class .hljs-title,
.article-body .hljs-built_in { color: #2a8a6a; }
.article-body .hljs-title,
.article-body .hljs-title.function_,
.article-body .hljs-function .hljs-title { color: #2a6ab5; }
.article-body .hljs-string,
.article-body .hljs-symbol,
.article-body .hljs-bullet,
.article-body .hljs-link { color: #2a8a6a; }
.article-body .hljs-number,
.article-body .hljs-variable.constant_ { color: #c04040; }
.article-body .hljs-meta,
.article-body .hljs-meta .hljs-keyword,
.article-body .hljs-meta .hljs-string { color: #b8702a; }
.article-body .hljs-attr,
.article-body .hljs-attribute,
.article-body .hljs-variable,
.article-body .hljs-template-variable,
.article-body .hljs-params { color: #3a3a3a; }
.article-body .hljs-operator,
.article-body .hljs-punctuation { color: #6a6a6a; }
.article-body .hljs-emphasis { font-style: italic; }
.article-body .hljs-strong { font-weight: 600; }

/* code modal */

.code-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(250, 250, 250, 0.85);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.code-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.code-modal {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 24px 28px;
  max-width: 95vw;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.code-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.code-modal-title {
  font-family: 'Mundo Serif', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: #1a1a1a;
}

.code-modal-close {
  font-family: 'Mundo Serif', Georgia, serif;
  font-size: 12px;
  color: #aaa;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  transition: color 0.15s;
}

.code-modal-close:hover {
  color: #4a4a4a;
}

.code-modal pre {
  margin: 0;
  white-space: pre;
  overflow-x: auto;
}

.code-modal code {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.75;
  color: #3a3a3a;
  background: none;
  padding: 0;
}

.code-modal .line-num {
  color: #c0c0c0;
  display: inline-block;
  width: 24px;
  text-align: right;
  margin-right: 16px;
  user-select: none;
}

.code-modal .kw { color: #7b5ea7; }
.code-modal .type { color: #2a8a6a; }
.code-modal .fn { color: #2a6ab5; }
.code-modal .str { color: #2a8a6a; }
.code-modal .num { color: #c04040; }
.code-modal .cmt { color: #5a9a5a; font-style: italic; }
.code-modal .dir { color: #7b5ea7; }

.view-source-link {
  font-size: 12px;
  color: #aaa;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  transition: color 0.2s, border-color 0.2s;
  margin-left: 10px;
  font-style: normal;
  font-weight: 400;
}

.view-source-link:hover {
  color: #4a4a4a;
  border-bottom-color: #4a4a4a;
}

.article-body .katex-display {
  margin: 24px 0;
  overflow-x: auto;
  text-align: center;
}

.article-body .katex-display > .katex > .katex-html {
  display: inline-block;
  padding: 8px 16px;
}

.article-body .katex-html {
  background: #f0efeb;
  padding: 4px 5px;
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
}

.article-body .katex {
  font-size: 1.05em;
  margin: 0 1px;
  position: relative;
  top: -1px;
}

.article-body p {
  margin-bottom: 20px;
}

.article-body hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 28px 0;
}

.article-body h3 {
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  color: #1a1a1a;
  margin-top: 32px;
  margin-bottom: 8px;
}

.article-body h3 .heading-logo {
  display: inline-block;
  height: 18px;
  width: 18px;
  vertical-align: -4px;
  margin: 0 8px 0 0;
  border-radius: 3px;
  border-bottom: none;
  object-fit: contain;
  object-position: center;
}

.article-body h3 .heading-logo.is-tight {
  height: 13px;
  width: 18px;
  vertical-align: -2px;
}

.article-body h3 .heading-logo.is-mid {
  height: 15px;
  width: 18px;
  vertical-align: -3px;
}

[data-theme="dark"] .article-body h3 .heading-logo.is-mono {
  filter: invert(1);
}

.article-body h4 {
  font-weight: 700;
  font-size: 10.5px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 26px;
  margin-bottom: 10px;
}

/* heading-as-citation: hovering the heading text surfaces the source popup */
.article-body h4 a[data-popup] {
  color: inherit;
  border-bottom: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.article-body h4 a[data-popup]:hover {
  color: #4a4a4a;
  border-bottom: none;
}

.article-body h5 {
  font-weight: 600;
  font-size: 12px;
  font-style: italic;
  color: #555;
  margin-top: 20px;
  margin-bottom: 6px;
}

/* Roofline model chart (inline SVG) */
.roofline-chart {
  display: block;
  width: 100%;
  max-width: 660px;
  height: auto;
  margin: 28px auto 32px;
  font-family: 'Mundo Serif', Georgia, serif;
  transform: translateX(-12px);
}

.roofline-chart .rl-axis {
  stroke: #4a4a4a;
  stroke-width: 1;
  fill: none;
}

.roofline-chart .rl-gridline {
  stroke: #d8d4c8;
  stroke-width: 0.5;
  stroke-dasharray: 2,3;
}

.roofline-chart .rl-guide {
  stroke: #b88c4a;
  stroke-width: 0.7;
  stroke-dasharray: 3,3;
  opacity: 0.55;
}

.roofline-chart .rl-roof {
  stroke: #1a1a1a;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.roofline-chart .rl-ridge {
  fill: #c46a3a;
  stroke: #1a1a1a;
  stroke-width: 1;
}

.roofline-chart .rl-kernel {
  fill: #1a1a1a;
}

.roofline-chart .rl-roof-label {
  font-size: 12px;
  font-style: italic;
  fill: #4a4a4a;
}

.roofline-chart .rl-region-label {
  font-size: 11px;
  font-style: italic;
  fill: #888;
  letter-spacing: 0.04em;
}

.roofline-chart .rl-ridge-label,
.roofline-chart .rl-kernel-label {
  font-size: 11.5px;
  fill: #1a1a1a;
}

.roofline-chart .rl-tick {
  font-size: 10.5px;
  fill: #6a6a6a;
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
}

.roofline-chart .rl-axis-label {
  font-size: 12px;
  fill: #1a1a1a;
}

.roofline-chart .region-stripe-mem {
  stroke: #c46a3a;
  stroke-width: 0.6;
  opacity: 0.18;
}

.roofline-chart .region-stripe-cmp {
  stroke: #5a8a4a;
  stroke-width: 0.6;
  opacity: 0.18;
}

[data-theme="dark"] .roofline-chart .rl-axis {
  stroke: #b0aba0;
}

[data-theme="dark"] .roofline-chart .rl-gridline {
  stroke: #3a3833;
}

[data-theme="dark"] .roofline-chart .rl-guide {
  stroke: #d8a868;
  opacity: 0.5;
}

[data-theme="dark"] .roofline-chart .rl-roof {
  stroke: #e0dccf;
}

[data-theme="dark"] .roofline-chart .rl-ridge {
  fill: #d88a5a;
  stroke: #e0dccf;
}

[data-theme="dark"] .roofline-chart .rl-kernel {
  fill: #e0dccf;
}

[data-theme="dark"] .roofline-chart .rl-roof-label,
[data-theme="dark"] .roofline-chart .rl-axis-label,
[data-theme="dark"] .roofline-chart .rl-ridge-label,
[data-theme="dark"] .roofline-chart .rl-kernel-label {
  fill: #e0dccf;
}

[data-theme="dark"] .roofline-chart .rl-region-label {
  fill: #8a847a;
}

[data-theme="dark"] .roofline-chart .rl-tick {
  fill: #a09a8e;
}

[data-theme="dark"] .roofline-chart .region-stripe-mem {
  stroke: #d88a5a;
  opacity: 0.22;
}

[data-theme="dark"] .roofline-chart .region-stripe-cmp {
  stroke: #8aaa78;
  opacity: 0.22;
}

/* MESI cache-coherence state diagram */
.mesi-chart {
  display: block;
  width: 100%;
  max-width: 660px;
  height: auto;
  margin: 4px auto 32px;
  font-family: 'Mundo Serif', Georgia, serif;
  transform: translateX(-12px);
}

.mesi-chart .mesi-state {
  fill: #f4efe2;
  stroke: #1a1a1a;
  stroke-width: 1.4;
}

.mesi-chart .mesi-letter {
  font-size: 22px;
  font-weight: 700;
  fill: #1a1a1a;
}

.mesi-chart .mesi-name {
  font-size: 10px;
  fill: #6a6a6a;
  font-style: italic;
}

.mesi-chart .mesi-edge {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.mesi-chart .mesi-rd-hit  { stroke: #5a8a4a; }
.mesi-chart .mesi-rd-miss { stroke: #4a7a9a; }
.mesi-chart .mesi-wr-hit  { stroke: #c8a058; }
.mesi-chart .mesi-wr-miss { stroke: #c4503a; }
.mesi-chart .mesi-snoop {
  stroke-dasharray: 1, 5;
}

.mesi-chart .ah-rdhit  { fill: #5a8a4a; }
.mesi-chart .ah-rdmiss { fill: #4a7a9a; }
.mesi-chart .ah-wrhit  { fill: #c8a058; }
.mesi-chart .ah-wrmiss { fill: #c4503a; }

[data-theme="dark"] .mesi-chart .mesi-state {
  fill: #2a2620;
  stroke: #e0dccf;
}

[data-theme="dark"] .mesi-chart .mesi-letter,
[data-theme="dark"] .mesi-chart .mesi-label {
  fill: #e0dccf;
}

[data-theme="dark"] .mesi-chart .mesi-label,
[data-theme="dark"] .mesi-chart .mesi-label-d {
  stroke: #2a2620;
}

.article-body .mesi-key {
  text-align: center;
  font-size: 11.5px;
  color: #4a4a4a;
  margin: -8px auto 4px;
  max-width: 660px;
}

.article-body .mesi-key .key-rdhit  { color: #5a8a4a; font-size: 14px; vertical-align: -1px; }
.article-body .mesi-key .key-rdmiss { color: #4a7a9a; font-size: 14px; vertical-align: -1px; }
.article-body .mesi-key .key-wrhit  { color: #c8a058; font-size: 14px; vertical-align: -1px; }
.article-body .mesi-key .key-wrmiss { color: #c4503a; font-size: 14px; vertical-align: -1px; }
.article-body .mesi-key .key-snoop  { color: #8a847a; font-size: 14px; vertical-align: -1px; letter-spacing: 1px; }

.article-body .mesi-key-sub {
  text-align: center;
  font-size: 10.5px;
  font-style: italic;
  color: #8a847a;
  margin: 0 auto 28px;
  max-width: 660px;
}

[data-theme="dark"] .article-body .mesi-key {
  color: #c8c2b6;
}

[data-theme="dark"] .article-body .mesi-key .key-rdhit  { color: #7aaa6a; }
[data-theme="dark"] .article-body .mesi-key .key-rdmiss { color: #6a9aba; }
[data-theme="dark"] .article-body .mesi-key .key-wrhit  { color: #d8b878; }
[data-theme="dark"] .article-body .mesi-key .key-wrmiss { color: #d8704a; }
[data-theme="dark"] .article-body .mesi-key .key-snoop  { color: #a09a8e; }

[data-theme="dark"] .article-body .mesi-key-sub {
  color: #6a6660;
}

[data-theme="dark"] .mesi-chart .mesi-edge {
  stroke: #e0dccf;
}

[data-theme="dark"] .mesi-chart .mesi-rd-hit  { stroke: #7aaa6a; }
[data-theme="dark"] .mesi-chart .mesi-rd-miss { stroke: #6a9aba; }
[data-theme="dark"] .mesi-chart .mesi-wr-hit  { stroke: #d8b878; }
[data-theme="dark"] .mesi-chart .mesi-wr-miss { stroke: #d8704a; }

[data-theme="dark"] .mesi-chart .ah-rdhit  { fill: #7aaa6a; }
[data-theme="dark"] .mesi-chart .ah-rdmiss { fill: #6a9aba; }
[data-theme="dark"] .mesi-chart .ah-wrhit  { fill: #d8b878; }
[data-theme="dark"] .mesi-chart .ah-wrmiss { fill: #d8704a; }

[data-theme="dark"] .mesi-chart .mesi-name {
  fill: #8a847a;
}

.article-body .philosophy {
  background: #f4f2ea;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 18px 0;
}

/* timeline-style genealogy */

.article-body .genealogy {
  margin: 20px 0 28px;
  position: relative;
}

.article-body .genealogy::before {
  content: '';
  position: absolute;
  left: 54px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #e0ddd3;
}

.article-body .gen-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
  position: relative;
}

.article-body .gen-row:last-child {
  margin-bottom: 0;
}

.article-body .gen-year {
  flex: 0 0 46px;
  text-align: right;
  padding-right: 18px;
  padding-top: 3px;
  font-family: 'Mundo Serif', Georgia, serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.article-body .gen-row::before {
  content: '';
  position: absolute;
  left: 50px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b5b0a2;
  border: 2px solid #fafafa;
  box-sizing: content-box;
}

.article-body .gen-body {
  flex: 1 1 auto;
  padding-left: 22px;
  min-width: 0;
}

.article-body .gen-head {
  font-size: 14.5px;
  color: #1a1a1a;
  margin-bottom: 3px;
  line-height: 1.3;
}

.article-body .gen-head a {
  border-bottom-color: transparent;
}

.article-body .gen-head a:hover {
  border-bottom-color: #4a4a4a;
}

.article-body .gen-chip {
  color: #8a8a8a;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  margin-left: 10px;
  font-family: 'Mundo Serif', Georgia, serif;
  letter-spacing: 0.01em;
}

.article-body .gen-desc {
  font-size: 13.5px;
  color: #4a4a4a;
  line-height: 1.55;
}

.article-body .philosophy::before {
  content: "Philosophy";
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #8b8676;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}

.article-body .philosophy p:last-child {
  margin-bottom: 0;
}

/* per-architecture sticky genealogy rail (wide screens only) */
.article-body section.architecture {
  display: block;
}

@media (min-width: 1680px) {
  /* page width stays at the standard 1160 — sidebar position matches every
     other page. the rail extends to the right OF the page boundary, into
     the otherwise-empty viewport margin. */

  .article-body section.architecture:has(.genealogy-block) {
    display: grid;
    grid-template-columns: minmax(0, 720px) 380px;
    column-gap: 48px;
    align-items: start;
    /* extend beyond article-body's 720px column so the rail sits to the
       right of the page edge (rail 380 + gap 48 = 428 of overflow) */
    width: calc(100% + 428px);
  }

  .article-body section.architecture:has(.genealogy-block) > * {
    grid-column: 1;
    min-width: 0;
  }

  .article-body section.architecture > .genealogy-block {
    grid-column: 2;
    /* row 2 = the row containing the philosophy in column 1. the rail's
       natural top therefore sits at the same y as the philosophy's top in
       every section, regardless of philosophy length — giving consistent
       entry alignment across architectures. */
    grid-row: 2 / span 999;
    position: sticky;
    top: 24px;
    align-self: start;
    /* block fills the viewport vertically; content inside is flex-centred.
       this preserves the simple sticky logic (engage at viewport top, exit
       at section end) while displaying the genealogy content at viewport
       centre throughout. */
    height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    padding-right: 8px;
    font-size: 0.92em;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .article-body section.architecture > .genealogy-block:hover {
    scrollbar-color: #ddd transparent;
  }

  /* the "Genealogy" h4 in the rail is a label, not a section heading */
  .article-body section.architecture > .genealogy-block > h4 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 10.5px;
    font-weight: 700;
    color: #8b8676;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-bottom: none;
    padding-bottom: 0;
  }

  .article-body section.architecture > .genealogy-block > .genealogy {
    margin: 0;
  }

  /* tighten vertical rhythm inside the rail — the genealogy needs to
     read as a compact reference, not a full timeline */
  .article-body section.architecture > .genealogy-block .gen-row {
    margin-bottom: 10px;
  }

  .article-body section.architecture > .genealogy-block .gen-desc {
    line-height: 1.45;
  }

  .article-body section.architecture > .genealogy-block .gen-head {
    margin-bottom: 1px;
  }
}

.article-body .definitions {
  display: flex;
  gap: 14px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.article-body p:has(+ .definitions) {
  margin-bottom: 0;
}

.article-body .definition {
  flex: 1 1 240px;
  background: #f7f5ef;
  border: 1px dotted #bbb;
  border-radius: 8px;
  padding: 14px 18px 16px;
}

.article-body .definition-term {
  font-family: 'Mundo Serif', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.article-body .definition-body {
  font-size: 13px;
  line-height: 1.55;
  color: #4a4a4a;
}

.article-body .definitions:has(.analogy-key) {
  margin: 18px 0 36px;
}

.article-body .definition.analogy-key {
  flex: 1 1 100%;
}

.article-body .definition.analogy-key .definition-term {
  margin-bottom: 14px;
}

.article-body .analogy-key table.analogy {
  width: auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  border-collapse: collapse;
}

.article-body .analogy-key table.analogy th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0b0b0;
  text-align: left;
  padding: 0 24px 6px 0;
  border-bottom: 1px solid #d4cfbd;
  white-space: nowrap;
}

.article-body .analogy-key table.analogy td {
  padding: 4px 24px 4px 0;
  border-bottom: none;
  vertical-align: top;
}

.article-body .analogy-key table.analogy td:first-child {
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

.article-body .analogy-key table.analogy td:last-child {
  color: #4a4a4a;
}

.article-body .analogy-key table.analogy tbody tr:hover {
  background: transparent;
}

.article-body .analogy-key table.analogy tbody tr:first-child td {
  padding-top: 8px;
}

[data-theme="dark"] .article-body .analogy-key table.analogy th {
  color: #6a6660;
  border-bottom-color: #4a4640;
}

[data-theme="dark"] .article-body .analogy-key table.analogy td:first-child {
  color: #e8e4d8;
}

[data-theme="dark"] .article-body .analogy-key table.analogy td:last-child {
  color: #b0aa98;
}

.article-body ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

.article-body ol li {
  margin-bottom: 4px;
}

.article-body ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.article-body ul li {
  margin-bottom: 8px;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: 12.5px;
  line-height: 1.5;
}

.article-body table th,
.article-body table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #ececec;
  vertical-align: top;
}

.article-body table th {
  font-weight: 600;
  color: #1a1a1a;
  border-bottom: 1px solid #c8c8c8;
  white-space: nowrap;
}

.article-body table tbody tr:hover {
  background: #faf8f0;
}

[data-theme="dark"] .article-body table th,
[data-theme="dark"] .article-body table td {
  border-bottom-color: #2e2c27;
}

[data-theme="dark"] .article-body table th {
  color: #e8e4d8;
  border-bottom-color: #4a4640;
}

[data-theme="dark"] .article-body table tbody tr:hover {
  background: #1f1d18;
}

.article-body .comparison-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 20px 0 40px;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: #cfc9b8 transparent;
}

.article-body .comparison-wrap::-webkit-scrollbar {
  height: 8px;
}

.article-body .comparison-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.article-body .comparison-wrap::-webkit-scrollbar-thumb {
  background: #cfc9b8;
  border-radius: 4px;
}

.article-body .comparison-wrap::-webkit-scrollbar-thumb:hover {
  background: #b0aa98;
}

[data-theme="dark"] .article-body .comparison-wrap {
  scrollbar-color: #4a4640 transparent;
}

[data-theme="dark"] .article-body .comparison-wrap::-webkit-scrollbar-thumb {
  background: #4a4640;
}

[data-theme="dark"] .article-body .comparison-wrap::-webkit-scrollbar-thumb:hover {
  background: #6a6660;
}

.article-body .comparison-wrap > table.comparison-table {
  margin: 0;
}

.article-body table.comparison-table tbody tr td {
  border-bottom: none;
}

.article-body table.comparison-table tbody:not(:last-child) tr:last-child td {
  border-bottom: 1px solid #c8c8c8;
}

.article-body table.comparison-table td.company {
  background: #efece4;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  width: 36px;
}

.article-body table.comparison-table td.company .company-logo {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
  border-bottom: none;
  margin: 0;
}

.article-body table.comparison-table td.company .company-logo.is-tight {
  height: 14px;
}

[data-theme="dark"] .article-body table.comparison-table tbody:not(:last-child) tr:last-child td {
  border-bottom-color: #4a4640;
}

[data-theme="dark"] .article-body table.comparison-table td.company {
  background: #2a2823;
  color: #e8e4d8;
}

.article-body img {
  display: block;
  max-width: 100%;
  margin: 28px auto;
}

.preview-with-logo {
  padding: 12px 16px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.preview-with-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.preview-with-logo .preview-text {
  flex: 1;
  min-width: 0;
}

.preview-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.preview-meta {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
}

.preview-with-logo h3 {
  font-family: 'Mundo Serif', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
}

.preview-with-logo p {
  color: #4a4a4a;
  font-size: 12.5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* preview popups */

.preview {
  position: fixed;
  width: 420px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
}

.preview.visible {
  opacity: 1;
}


.preview-wiki {
  padding: 12px 16px;
}

.preview-wiki img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  border-radius: 2px;
  margin-bottom: 10px;
  background: #f8f8f8;
  padding: 12px;
}

.preview-wiki h3 {
  font-family: 'Mundo Serif', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1a1a1a;
}

.preview-wiki p {
  color: #4a4a4a;
  font-size: 12.5px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-github {
  padding: 12px 16px;
}

.preview-github .github-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.preview-github .github-header .meta {
  margin: 0;
  flex-shrink: 0;
}

.preview-github h3 {
  font-family: 'Mundo Serif', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
}

.preview-github p {
  color: #4a4a4a;
  font-size: 12.5px;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-github .meta {
  font-size: 11.5px;
  color: #888;
  display: flex;
  gap: 14px;
}

.preview-social {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.preview-social .social-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.preview-social .social-info h3 {
  font-family: 'Mundo Serif', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.preview-social .social-info p {
  font-size: 12px;
  color: #888;
}

/* theme toggle */

.theme-toggle {
  margin-top: 18px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, transform 0.3s ease;
}

.theme-toggle:hover {
  color: #4a4a4a;
}

.theme-toggle svg {
  width: 100%;
  height: 100%;
}

/* dark mode */

[data-theme="dark"] body {
  background: #080706;
  color: #b8b3a8;
  font-weight: 300;
}

[data-theme="dark"] .name {
  color: #e8e4d8;
}

[data-theme="dark"] .sidebar-toc { border-top-color: #2e2c27; }
[data-theme="dark"] .sidebar-toc-list { border-left-color: #2e2c27; }
[data-theme="dark"] .sidebar-toc-title { color: #6a6660; }
[data-theme="dark"] .sidebar-toc-link { color: #6a6660; }
[data-theme="dark"] .sidebar-toc-link.passed { color: #908b80; }
[data-theme="dark"] .sidebar-toc-link.current { color: #f0ece0; }
[data-theme="dark"] .sidebar-toc-link:hover { color: #d8d4c8; }
[data-theme="dark"] .sidebar-toc-indicator { background: #f0ece0; }
[data-theme="dark"] .sidebar-toc-sub-indicator { background: #f0ece0; }
[data-theme="dark"] .sidebar-toc-sublink { color: #6a6660; }
[data-theme="dark"] .sidebar-toc-sublink:hover { color: #d8d4c8; }
[data-theme="dark"] .sidebar-toc-sublink.current { color: #f0ece0; }
[data-theme="dark"] .sidebar:hover { scrollbar-color: #3a3833 transparent; }

[data-theme="dark"] .sidebar-link {
  color: #908b80;
}

[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active {
  color: #e8e4d8;
}

[data-theme="dark"] .social-logo {
  color: #6a6660;
}

[data-theme="dark"] .social-logo:hover {
  color: #e8e4d8;
}

[data-theme="dark"] .theme-toggle {
  color: #6a6660;
}

[data-theme="dark"] .theme-toggle:hover {
  color: #e8e4d8;
}

[data-theme="dark"] a {
  color: #e8e4d8;
  border-bottom-color: #3a3833;
}

[data-theme="dark"] a:hover {
  border-bottom-color: #e8e4d8;
}

[data-theme="dark"] a:not([href]) {
  border-bottom-color: #6a6660;
}

[data-theme="dark"] a:not([href]):hover {
  border-bottom-color: #e8e4d8;
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .article-header .article-title,
[data-theme="dark"] .article-body h3 {
  color: #e8e4d8;
}

[data-theme="dark"] .item::before,
[data-theme="dark"] .item-ref::before {
  color: #555048;
}

[data-theme="dark"] .project-date,
[data-theme="dark"] .project-ref,
[data-theme="dark"] .project-ref a,
[data-theme="dark"] .item-ref .ref,
[data-theme="dark"] .item-ref .ref a,
[data-theme="dark"] .article-header .article-date,
[data-theme="dark"] .article-date {
  color: #908b80;
}

[data-theme="dark"] .project-ref a:hover,
[data-theme="dark"] .item-ref .ref a:hover {
  color: #e8e4d8;
}

[data-theme="dark"] .project-link-icon,
[data-theme="dark"] .article-link-icon,
[data-theme="dark"] .project-ext {
  color: #6a6660;
}

[data-theme="dark"] .project-link-icon:hover,
[data-theme="dark"] .article-link-icon:hover {
  color: #e8e4d8;
}

[data-theme="dark"] .project-ext:hover {
  color: #b8b3a8;
}

[data-theme="dark"] .article-desc,
[data-theme="dark"] .project-desc {
  color: #a09a8e;
}

[data-theme="dark"] .article-title a,
[data-theme="dark"] .project-title a {
  color: #e8e4d8;
  border-bottom-color: #3a3833;
}

[data-theme="dark"] .article-title a:hover,
[data-theme="dark"] .project-title a:hover {
  border-bottom-color: #e8e4d8;
}

[data-theme="dark"] .article-item,
[data-theme="dark"] .project-item {
  border-bottom-color: #2a2823;
}

[data-theme="dark"] .article-item:first-child,
[data-theme="dark"] .project-item:first-child {
  border-top-color: #2a2823;
}

[data-theme="dark"] .divider,
[data-theme="dark"] .article-body hr {
  border-top-color: #2a2823;
}

[data-theme="dark"] .ascii-wave {
  color: #3a3833;
}

[data-theme="dark"] .chip-array {
  color: #5a574e;
}

[data-theme="dark"] .article-body code {
  background: #181612;
  color: #e0dccf;
}

[data-theme="dark"] .article-body pre {
  background: #14120e;
}

[data-theme="dark"] .article-body pre code {
  color: #e0dccf;
}

/* highlight.js token colors — dark theme (palette matches .code-modal) */
[data-theme="dark"] .article-body pre code.hljs { color: #e0dccf; background: none; }
[data-theme="dark"] .article-body .hljs-comment,
[data-theme="dark"] .article-body .hljs-quote { color: #6fa86f; font-style: italic; }
[data-theme="dark"] .article-body .hljs-keyword,
[data-theme="dark"] .article-body .hljs-selector-tag,
[data-theme="dark"] .article-body .hljs-literal,
[data-theme="dark"] .article-body .hljs-section,
[data-theme="dark"] .article-body .hljs-doctag,
[data-theme="dark"] .article-body .hljs-name { color: #b48ce0; }
[data-theme="dark"] .article-body .hljs-type,
[data-theme="dark"] .article-body .hljs-class .hljs-title,
[data-theme="dark"] .article-body .hljs-built_in { color: #6cc8a4; }
[data-theme="dark"] .article-body .hljs-title,
[data-theme="dark"] .article-body .hljs-title.function_,
[data-theme="dark"] .article-body .hljs-function .hljs-title { color: #6aa6e8; }
[data-theme="dark"] .article-body .hljs-string,
[data-theme="dark"] .article-body .hljs-symbol,
[data-theme="dark"] .article-body .hljs-bullet,
[data-theme="dark"] .article-body .hljs-link { color: #6cc8a4; }
[data-theme="dark"] .article-body .hljs-number,
[data-theme="dark"] .article-body .hljs-variable.constant_ { color: #e07a7a; }
[data-theme="dark"] .article-body .hljs-meta,
[data-theme="dark"] .article-body .hljs-meta .hljs-keyword,
[data-theme="dark"] .article-body .hljs-meta .hljs-string { color: #d6a060; }
[data-theme="dark"] .article-body .hljs-attr,
[data-theme="dark"] .article-body .hljs-attribute,
[data-theme="dark"] .article-body .hljs-variable,
[data-theme="dark"] .article-body .hljs-template-variable,
[data-theme="dark"] .article-body .hljs-params { color: #e0dccf; }
[data-theme="dark"] .article-body .hljs-operator,
[data-theme="dark"] .article-body .hljs-punctuation { color: #a09a8e; }

[data-theme="dark"] .article-body h4 {
  color: #a09a8e;
}

[data-theme="dark"] .article-body h4 a[data-popup]:hover {
  color: #e0dccf;
}

[data-theme="dark"] .article-body h5 {
  color: #c8c2b6;
}

[data-theme="dark"] .article-body .philosophy {
  background: #14120e;
}

[data-theme="dark"] .article-body .philosophy::before {
  color: #a09a8e;
}

[data-theme="dark"] .article-body .definition {
  background: #14120e;
  border-color: #555048;
}

[data-theme="dark"] .article-body .definition-term {
  color: #e8e4d8;
}

[data-theme="dark"] .article-body .definition-body {
  color: #d0cabe;
}

[data-theme="dark"] .article-body .genealogy::before {
  background: #2e2c27;
}

[data-theme="dark"] .article-body .gen-row::before {
  background: #6a6660;
  border-color: #080706;
}

[data-theme="dark"] .article-body .gen-year {
  color: #a09a8e;
}

[data-theme="dark"] .article-body .gen-head {
  color: #e8e4d8;
}

[data-theme="dark"] .article-body .gen-chip {
  color: #a09a8e;
}

[data-theme="dark"] .article-body .gen-desc {
  color: #d0cabe;
}

[data-theme="dark"] .article-body .katex-html {
  background: #14120e;
}

[data-theme="dark"] .preview,
[data-theme="dark"] .code-modal {
  background: #14120e;
  border-color: #3a3833;
  color: #e0dccf;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .preview-wiki h3,
[data-theme="dark"] .preview-github h3,
[data-theme="dark"] .preview-social .social-info h3,
[data-theme="dark"] .preview-with-logo h3 {
  color: #e8e4d8;
}

[data-theme="dark"] .preview-wiki p,
[data-theme="dark"] .preview-github p,
[data-theme="dark"] .preview-with-logo p {
  color: #d0cabe;
}

[data-theme="dark"] .preview-wiki img {
  background: #2a2823;
}

[data-theme="dark"] .preview-github .meta,
[data-theme="dark"] .preview-social .social-info p,
[data-theme="dark"] .preview-meta {
  color: #a09a8e;
}

[data-theme="dark"] .code-modal-overlay {
  background: rgba(10, 9, 7, 0.85);
}

[data-theme="dark"] .code-modal-header {
  border-bottom-color: #3a3833;
}

[data-theme="dark"] .code-modal-title {
  color: #e8e4d8;
}

[data-theme="dark"] .code-modal-close {
  color: #908b80;
}

[data-theme="dark"] .code-modal-close:hover {
  color: #e8e4d8;
}

[data-theme="dark"] .code-modal code {
  color: #e0dccf;
}

[data-theme="dark"] .code-modal .line-num {
  color: #555048;
}

[data-theme="dark"] .code-modal .kw { color: #b48ce0; }
[data-theme="dark"] .code-modal .type { color: #6cc8a4; }
[data-theme="dark"] .code-modal .fn { color: #6aa6e8; }
[data-theme="dark"] .code-modal .str { color: #6cc8a4; }
[data-theme="dark"] .code-modal .num { color: #e07a7a; }
[data-theme="dark"] .code-modal .cmt { color: #6fa86f; }
[data-theme="dark"] .code-modal .dir { color: #b48ce0; }

[data-theme="dark"] .view-source-link {
  color: #908b80;
  border-bottom-color: #3a3833;
}

[data-theme="dark"] .view-source-link:hover {
  color: #e8e4d8;
  border-bottom-color: #e8e4d8;
}

/* responsive */

@media (max-width: 700px) {
  body {
    padding: 40px 20px;
  }

  .name {
    font-size: 42px;
    margin-bottom: 28px;
  }

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

  .sidebar {
    width: 100%;
    padding-right: 0;
    margin-bottom: 28px;
    position: static;
    max-height: none;
    overflow: visible;
  }

  .sidebar-toc {
    display: none;
  }
}

/* ====== How To Design A Chip — inline SVG diagrams ====== */

/* shared base for the chip-design post charts */
.flow-chart,
.abstraction-chart,
.uvm-chart,
.wafer-chart,
.xs-chart,
.waveform-chart,
.transistor-chart {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 28px auto 32px;
  font-family: 'Mundo Serif', Georgia, serif;
}

.wafer-chart {
  max-width: 880px;
}

.transistor-chart {
  max-width: 800px;
}

.waveform-chart {
  transform: translateX(-15px);
}

/* ===== Flow chart ===== */
.flow-chart .flow-col-label {
  font-size: 12px;
  font-style: italic;
  fill: #888;
  letter-spacing: 0.04em;
}
.flow-chart .flow-phase {
  fill: #f4efe2;
  stroke: #1a1a1a;
  stroke-width: 1.2;
  rx: 4;
}
.flow-chart .flow-phase-name {
  font-size: 13px;
  fill: #1a1a1a;
  font-weight: 600;
  text-anchor: middle;
}
.flow-chart .flow-phase-sub {
  font-size: 11px;
  font-style: italic;
  fill: #6a6a6a;
  text-anchor: middle;
}
.flow-chart .flow-arrow {
  stroke: #4a4a4a;
  stroke-width: 1.2;
  fill: none;
}
.flow-chart .flow-arrowhead {
  fill: #4a4a4a;
}
.flow-chart .flow-band {
  stroke: #b88c4a;
  stroke-width: 0.8;
  fill: #efe7d0;
  rx: 3;
}
.flow-chart .flow-band-name {
  font-size: 11.5px;
  fill: #1a1a1a;
  text-anchor: middle;
  font-style: italic;
}

[data-theme="dark"] .flow-chart .flow-col-label { fill: #8a847a; }
[data-theme="dark"] .flow-chart .flow-phase {
  fill: #2a2823;
  stroke: #c8c2b3;
}
[data-theme="dark"] .flow-chart .flow-phase-name { fill: #e0dccf; }
[data-theme="dark"] .flow-chart .flow-phase-sub  { fill: #a09a8e; }
[data-theme="dark"] .flow-chart .flow-arrow      { stroke: #b0aba0; }
[data-theme="dark"] .flow-chart .flow-arrowhead  { fill: #b0aba0; }
[data-theme="dark"] .flow-chart .flow-band {
  stroke: #d8a868;
  fill: #322d22;
}
[data-theme="dark"] .flow-chart .flow-band-name { fill: #e0dccf; }

/* ===== Abstraction stack ===== */
.abstraction-chart .abs-level {
  stroke: #1a1a1a;
  stroke-width: 1.1;
  rx: 3;
}
.abstraction-chart .abs-sw  { fill: #efe7d0; }
.abstraction-chart .abs-rtl { fill: #f0d8be; stroke-width: 1.6; }
.abstraction-chart .abs-hw  { fill: #e9e1cc; }
.abstraction-chart .abs-si  { fill: #ddd2b6; }
.abstraction-chart .abs-name {
  font-size: 13px;
  fill: #1a1a1a;
  text-anchor: start;
  font-weight: 500;
}
.abstraction-chart .abs-name-rtl {
  font-weight: 700;
}
.abstraction-chart .abs-tag {
  font-size: 11px;
  font-style: italic;
  fill: #6a6a6a;
  text-anchor: end;
}
.abstraction-chart .abs-tag-rtl {
  fill: #4a4a4a;
}
.abstraction-chart .abs-boundary {
  stroke: #b88c4a;
  stroke-width: 1.5;
  stroke-dasharray: 4,4;
}
.abstraction-chart .abs-boundary-label {
  font-size: 11px;
  font-style: italic;
  fill: #b88c4a;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .abstraction-chart .abs-level { stroke: #c8c2b3; }
[data-theme="dark"] .abstraction-chart .abs-sw   { fill: #322d22; }
[data-theme="dark"] .abstraction-chart .abs-rtl  { fill: #3a2e1a; }
[data-theme="dark"] .abstraction-chart .abs-hw   { fill: #2e2920; }
[data-theme="dark"] .abstraction-chart .abs-si   { fill: #2c2820; }
[data-theme="dark"] .abstraction-chart .abs-name      { fill: #e0dccf; }
[data-theme="dark"] .abstraction-chart .abs-tag       { fill: #a09a8e; }
[data-theme="dark"] .abstraction-chart .abs-tag-rtl   { fill: #d0c8b4; }
[data-theme="dark"] .abstraction-chart .abs-boundary  { stroke: #d8a868; }
[data-theme="dark"] .abstraction-chart .abs-boundary-label { fill: #d8a868; }

/* ===== UVM testbench ===== */
.uvm-chart .uvm-env {
  fill: #f6f3e8;
  stroke: #1a1a1a;
  stroke-width: 1.2;
  stroke-dasharray: 4,4;
  rx: 6;
}
.uvm-chart .uvm-env-label {
  font-size: 12px;
  font-style: italic;
  fill: #6a6a6a;
}
.uvm-chart .uvm-block {
  fill: #efe7d0;
  stroke: #1a1a1a;
  stroke-width: 1.2;
  rx: 4;
}
.uvm-chart .uvm-dut {
  fill: #f0d8be;
  stroke: #1a1a1a;
  stroke-width: 1.6;
  rx: 4;
}
.uvm-chart .uvm-ref {
  fill: #e9e1cc;
  stroke: #1a1a1a;
  stroke-width: 1.2;
  rx: 4;
}
.uvm-chart .uvm-sb {
  fill: #ecdfb9;
  stroke: #1a1a1a;
  stroke-width: 1.2;
  rx: 4;
}
.uvm-chart .uvm-cov {
  fill: #ddd2b6;
  stroke: #1a1a1a;
  stroke-width: 1.2;
  rx: 4;
}
.uvm-chart .uvm-block-name {
  font-size: 13px;
  fill: #1a1a1a;
  text-anchor: middle;
  font-weight: 500;
}
.uvm-chart .uvm-dut-name {
  font-size: 16px;
  font-weight: 700;
  fill: #1a1a1a;
  text-anchor: middle;
}
.uvm-chart .uvm-dut-sub {
  font-size: 11px;
  font-style: italic;
  fill: #6a6a6a;
  text-anchor: middle;
}
.uvm-chart .uvm-edge {
  stroke: #4a4a4a;
  stroke-width: 1.2;
  fill: none;
}
.uvm-chart .uvm-edge-dotted {
  stroke-dasharray: 4,3;
  stroke: #888;
}
.uvm-chart .uvm-arrowhead {
  fill: #4a4a4a;
}
.uvm-chart .uvm-edge-label {
  font-size: 10.5px;
  font-style: italic;
  fill: #888;
  text-anchor: middle;
}

[data-theme="dark"] .uvm-chart .uvm-env       { fill: #25221d; stroke: #c8c2b3; }
[data-theme="dark"] .uvm-chart .uvm-env-label { fill: #a09a8e; }
[data-theme="dark"] .uvm-chart .uvm-block     { fill: #322d22; stroke: #c8c2b3; }
[data-theme="dark"] .uvm-chart .uvm-dut       { fill: #3a2e1a; stroke: #c8c2b3; }
[data-theme="dark"] .uvm-chart .uvm-ref       { fill: #2e2920; stroke: #c8c2b3; }
[data-theme="dark"] .uvm-chart .uvm-sb        { fill: #38301c; stroke: #c8c2b3; }
[data-theme="dark"] .uvm-chart .uvm-cov       { fill: #2c2820; stroke: #c8c2b3; }
[data-theme="dark"] .uvm-chart .uvm-block-name,
[data-theme="dark"] .uvm-chart .uvm-dut-name { fill: #e0dccf; }
[data-theme="dark"] .uvm-chart .uvm-dut-sub  { fill: #a09a8e; }
[data-theme="dark"] .uvm-chart .uvm-edge     { stroke: #b0aba0; }
[data-theme="dark"] .uvm-chart .uvm-edge-dotted { stroke: #8a847a; }
[data-theme="dark"] .uvm-chart .uvm-arrowhead   { fill: #b0aba0; }
[data-theme="dark"] .uvm-chart .uvm-edge-label  { fill: #8a847a; }

/* ===== Wafer pipeline ===== */
.wafer-chart .wafer-step {
  fill: #efe7d0;
  stroke: #1a1a1a;
  stroke-width: 1.1;
  rx: 4;
}
.wafer-chart .wafer-step-final {
  fill: #f0d8be;
  stroke-width: 1.5;
}
.wafer-chart .wafer-name {
  font-size: 12.5px;
  fill: #1a1a1a;
  text-anchor: middle;
  font-weight: 500;
}
.wafer-chart .wafer-purity {
  font-size: 10.5px;
  font-style: italic;
  fill: #6a6a6a;
  text-anchor: middle;
}
.wafer-chart .wafer-edge {
  stroke: #4a4a4a;
  stroke-width: 1.4;
  fill: none;
}
.wafer-chart .wafer-arrowhead { fill: #4a4a4a; }
.wafer-chart .wafer-proc {
  font-size: 11px;
  fill: #4a4a4a;
  text-anchor: middle;
}
.wafer-chart .wafer-eq {
  font-size: 10.5px;
  fill: #b88c4a;
  text-anchor: middle;
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
}

[data-theme="dark"] .wafer-chart .wafer-step       { fill: #322d22; stroke: #c8c2b3; }
[data-theme="dark"] .wafer-chart .wafer-step-final { fill: #3a2e1a; }
[data-theme="dark"] .wafer-chart .wafer-name       { fill: #e0dccf; }
[data-theme="dark"] .wafer-chart .wafer-purity     { fill: #a09a8e; }
[data-theme="dark"] .wafer-chart .wafer-edge       { stroke: #b0aba0; }
[data-theme="dark"] .wafer-chart .wafer-arrowhead  { fill: #b0aba0; }
[data-theme="dark"] .wafer-chart .wafer-proc       { fill: #c8c2b3; }
[data-theme="dark"] .wafer-chart .wafer-eq         { fill: #d8a868; }

/* ===== Cross-section ===== */
.xs-chart .xs-substrate {
  fill: #d8cdb0;
  stroke: #1a1a1a;
  stroke-width: 1.1;
}
.xs-chart .xs-well-n   { fill: #e8d8b8; stroke: #1a1a1a; }
.xs-chart .xs-well-p   { fill: #d8c898; stroke: #1a1a1a; }
.xs-chart .xs-diff-n   { fill: #a4b8d8; stroke: #1a1a1a; }
.xs-chart .xs-diff-p   { fill: #d8a4a4; stroke: #1a1a1a; }
.xs-chart .xs-poly     { fill: #b88c4a; stroke: #1a1a1a; }
.xs-chart .xs-contact  { fill: #4a4a4a; }
.xs-chart .xs-metal    { stroke: #1a1a1a; stroke-width: 0.6; }
.xs-chart .xs-m1       { fill: #d4e0ef; }
.xs-chart .xs-m2       { fill: #c8d6e8; }
.xs-chart .xs-m3       { fill: #bcccdf; }
.xs-chart .xs-m4       { fill: #b0c2d6; }
.xs-chart .xs-m5       { fill: #a4b8cd; }
.xs-chart .xs-mtop     { fill: #889fb8; }
.xs-chart .xs-pass     { fill: #ede4cf; stroke: #1a1a1a; stroke-width: 0.6; }
.xs-chart .xs-pad      { fill: #c8a058; stroke: #1a1a1a; stroke-width: 1.1; rx: 2; }
.xs-chart .xs-name {
  font-size: 11.5px;
  fill: #f4efe2;
  text-anchor: middle;
  font-weight: 500;
}
.xs-chart .xs-name-dark { fill: #1a1a1a; }
.xs-chart .xs-tag {
  font-size: 10.5px;
  font-style: italic;
  fill: #4a4a4a;
  text-anchor: middle;
}
.xs-chart .xs-tag-r {
  font-size: 10.5px;
  font-style: italic;
  fill: #6a6a6a;
  text-anchor: start;
}
.xs-chart .xs-tag-dark {
  font-size: 11px;
  font-style: italic;
  fill: #1a1a1a;
  text-anchor: middle;
}
.xs-chart .xs-section-label {
  font-size: 11px;
  font-style: italic;
  fill: #888;
  letter-spacing: 0.04em;
}

[data-theme="dark"] .xs-chart .xs-substrate { fill: #3a3530; stroke: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-well-n    { fill: #463d28; stroke: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-well-p    { fill: #4a3f24; stroke: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-diff-n    { fill: #2c4258; stroke: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-diff-p    { fill: #4a2c2c; stroke: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-poly      { fill: #b88c4a; stroke: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-contact   { fill: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-metal     { stroke: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-m1        { fill: #2c3a4a; }
[data-theme="dark"] .xs-chart .xs-m2        { fill: #2e3c4c; }
[data-theme="dark"] .xs-chart .xs-m3        { fill: #303e4e; }
[data-theme="dark"] .xs-chart .xs-m4        { fill: #324050; }
[data-theme="dark"] .xs-chart .xs-m5        { fill: #344252; }
[data-theme="dark"] .xs-chart .xs-mtop      { fill: #485e74; }
[data-theme="dark"] .xs-chart .xs-pass      { fill: #3a3530; stroke: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-pad       { fill: #d8a868; stroke: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-name      { fill: #e0dccf; }
[data-theme="dark"] .xs-chart .xs-name-dark { fill: #e0dccf; }
[data-theme="dark"] .xs-chart .xs-tag       { fill: #c8c2b3; }
[data-theme="dark"] .xs-chart .xs-tag-r     { fill: #a09a8e; }
[data-theme="dark"] .xs-chart .xs-tag-dark  { fill: #e0dccf; }
[data-theme="dark"] .xs-chart .xs-section-label { fill: #8a847a; }

/* ===== Waveform chart ===== */
.waveform-chart .wf-cycle-num {
  font-size: 10px;
  fill: #888;
  text-anchor: middle;
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
}
.waveform-chart .wf-gridline {
  stroke: #e8e2d2;
  stroke-width: 0.5;
  stroke-dasharray: 2,3;
}
.waveform-chart .wf-label {
  font-size: 11px;
  fill: #4a4a4a;
  text-anchor: end;
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
}
.waveform-chart .wf-clk {
  stroke: #c46a3a;
  stroke-width: 1.5;
  fill: none;
  stroke-linejoin: miter;
}
.waveform-chart .wf-signal {
  stroke: #1a1a1a;
  stroke-width: 1.4;
  fill: none;
  stroke-linejoin: miter;
}
.waveform-chart .wf-bus {
  fill: #efe7d0;
  stroke: #1a1a1a;
  stroke-width: 1;
}
.waveform-chart .wf-bus-state {
  fill: #e9e1cc;
}
.waveform-chart .wf-bus-undef {
  fill: #d8cdb0;
  stroke: #1a1a1a;
  stroke-width: 1;
  opacity: 0.55;
}
.waveform-chart .wf-bus-value {
  font-size: 11px;
  fill: #1a1a1a;
  text-anchor: middle;
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
}
.waveform-chart .wf-cursor {
  stroke: #b88c4a;
  stroke-width: 1.2;
  stroke-dasharray: 4,3;
}
.waveform-chart .wf-cursor-label {
  font-size: 10px;
  fill: #b88c4a;
  text-anchor: middle;
  font-style: italic;
  font-family: 'Mundo Serif', Georgia, serif;
}

[data-theme="dark"] .waveform-chart .wf-cycle-num { fill: #a09a8e; }
[data-theme="dark"] .waveform-chart .wf-gridline { stroke: #3a3833; }
[data-theme="dark"] .waveform-chart .wf-label { fill: #c8c2b3; }
[data-theme="dark"] .waveform-chart .wf-clk { stroke: #d88a5a; }
[data-theme="dark"] .waveform-chart .wf-signal { stroke: #e0dccf; }
[data-theme="dark"] .waveform-chart .wf-bus {
  fill: #322d22;
  stroke: #c8c2b3;
}
[data-theme="dark"] .waveform-chart .wf-bus-state {
  fill: #2e2920;
}
[data-theme="dark"] .waveform-chart .wf-bus-undef {
  fill: #2c2820;
  stroke: #c8c2b3;
  opacity: 0.6;
}
[data-theme="dark"] .waveform-chart .wf-bus-value { fill: #e0dccf; }
[data-theme="dark"] .waveform-chart .wf-cursor { stroke: #d8a868; }
[data-theme="dark"] .waveform-chart .wf-cursor-label { fill: #d8a868; }

/* ===== Transistor cross-section chart ===== */
.transistor-chart .t-substrate {
  fill: #d8cdb0;
  stroke: #1a1a1a;
  stroke-width: 1.1;
}
.transistor-chart .t-diff-n {
  fill: #a4b8d8;
  stroke: #1a1a1a;
  stroke-width: 1;
}
.transistor-chart .t-poly {
  fill: #b88c4a;
  stroke: #1a1a1a;
  stroke-width: 1;
}
.transistor-chart .t-oxide {
  fill: #c46a3a;
  stroke: #1a1a1a;
  stroke-width: 0.5;
}
.transistor-chart .t-channel {
  fill: #d8a868;
  stroke: none;
  opacity: 0.55;
}
.transistor-chart .t-lead {
  stroke: #1a1a1a;
  stroke-width: 1.4;
  fill: none;
}
.transistor-chart .t-leader {
  stroke: #b88c4a;
  stroke-width: 0.8;
  stroke-dasharray: 3,3;
  fill: none;
}
.transistor-chart .t-terminal {
  font-size: 14px;
  font-weight: 700;
  fill: #1a1a1a;
  text-anchor: middle;
}
.transistor-chart .t-terminal-sub {
  font-size: 11px;
  font-style: italic;
  fill: #6a6a6a;
  text-anchor: middle;
}
.transistor-chart .t-region-label {
  font-size: 12px;
  fill: #1a1a1a;
  text-anchor: middle;
}
.transistor-chart .t-annotation {
  font-size: 11px;
  font-style: italic;
  fill: #1a1a1a;
  text-anchor: start;
}
.transistor-chart .t-annotation-sub {
  font-size: 10px;
  font-style: italic;
  fill: #6a6a6a;
  text-anchor: start;
}

[data-theme="dark"] .transistor-chart .t-substrate { fill: #3a3530; stroke: #c8c2b3; }
[data-theme="dark"] .transistor-chart .t-diff-n { fill: #2c4258; stroke: #c8c2b3; }
[data-theme="dark"] .transistor-chart .t-poly { fill: #b88c4a; stroke: #c8c2b3; }
[data-theme="dark"] .transistor-chart .t-oxide { fill: #d88a5a; stroke: #c8c2b3; }
[data-theme="dark"] .transistor-chart .t-channel { fill: #d8a868; }
[data-theme="dark"] .transistor-chart .t-lead { stroke: #e0dccf; }
[data-theme="dark"] .transistor-chart .t-leader { stroke: #d8a868; }
[data-theme="dark"] .transistor-chart .t-terminal { fill: #e0dccf; }
[data-theme="dark"] .transistor-chart .t-terminal-sub { fill: #a09a8e; }
[data-theme="dark"] .transistor-chart .t-region-label { fill: #e0dccf; }
[data-theme="dark"] .transistor-chart .t-annotation { fill: #e0dccf; }
[data-theme="dark"] .transistor-chart .t-annotation-sub { fill: #a09a8e; }

.transistor-chart .t-electron {
  fill: #2c4258;
  stroke: none;
}
.transistor-chart .t-electron-flow {
  stroke: #2c4258;
  stroke-width: 1.5;
  fill: none;
}
.transistor-chart .t-electron-arrow {
  fill: #2c4258;
}
.transistor-chart .t-electron-label {
  font-size: 11px;
  font-style: italic;
  fill: #2c4258;
  text-anchor: middle;
}

[data-theme="dark"] .transistor-chart .t-electron { fill: #6a9aba; }
[data-theme="dark"] .transistor-chart .t-electron-flow { stroke: #6a9aba; }
[data-theme="dark"] .transistor-chart .t-electron-arrow { fill: #6a9aba; }
[data-theme="dark"] .transistor-chart .t-electron-label { fill: #6a9aba; }