:root { --ink: #141413; --ember: #202020; --mist: #ffffff; --surface: #ffffff; --surface-muted: #f7f8f9; --line: rgba(20,20,19,.14); --article-ink: rgba(20,20,19,.8); --hero-text: #141413; --hero-muted: rgba(20,20,19,.68); --hero-kicker: rgba(20,20,19,.5); --hero-overlay: rgba(255,255,255,.35); --hero-panel: rgba(255,255,255,.75); }
:root[data-theme='dark'] { --ink: #f4f4f4; --ember: #ededed; --mist: #000000; --surface: #111111; --surface-muted: #1a1a1a; --line: rgba(255,255,255,.2); --article-ink: rgba(244,244,244,.84); --hero-text: #f5f5f5; --hero-muted: rgba(245,245,245,.76); --hero-kicker: rgba(245,245,245,.58); --hero-overlay: rgba(0,0,0,.32); --hero-panel: rgba(0,0,0,.84); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { background: var(--mist); color: var(--ink); transition: background-color .2s ease, color .2s ease; }
body { min-width: 320px; }
[x-cloak] { display: none !important; }
.site-header { transition: background .25s ease, border-color .25s ease; }
.nav-link { color: rgba(20,20,19,.58); transition: color .2s ease; }
.nav-link:hover { color: var(--ink); }
.icon-button { display: inline-flex; height: 32px; width: 32px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); transition: opacity .2s ease, transform .2s ease; }
.icon-button:hover { opacity: .6; transform: translateY(-1px); }
.icon-button svg { width: 17px; height: 17px; stroke-width: 1.7; }
.stats-panel { border: 1px solid rgba(20,20,19,.14); background: rgba(255,255,255,.82); border-radius: 999px; padding: 7px 10px; }
.stat-chip { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: rgba(20,20,19,.55); }
.stat-chip svg { width: 12px; height: 12px; stroke-width: 1.6; }
.stat-chip b { color: var(--ink); font-size: 12px; font-weight: 700; }
.stat-chip em { font-style: normal; font-size: 10px; }
.eyebrow { color: rgba(20,20,19,.48); font: 500 11px/1.2 'DM Mono', monospace; letter-spacing: .19em; text-transform: uppercase; }
.pill-outline, .pill-dark { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 12px 18px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: all .25s ease; }
.pill-outline { border: 1px solid var(--ink); color: var(--ink); }
.pill-outline:hover { background: var(--ink); color: white; }
.pill-dark { background: #232321; color: white; }
.pill-dark:hover { background: var(--ember); }
.announcement { border-left: 2px solid var(--ember); background: white; padding: 14px 18px; font-size: 13px; }
.post-card { border-top: 1px solid rgba(20,20,19,.15); padding-top: 18px; }
.experiment-card { display: block; min-height: 270px; border: 1px solid rgba(20,20,19,.14); background: white; padding: 22px; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.experiment-card:hover { background: white; border-color: var(--ember); transform: translateY(-3px); }
.flame { display: inline-block; color: var(--ember); font-size: 30px; line-height: 1; }
.home-hero { background: var(--mist); color: var(--hero-text); }
.home-hero-overlay { background: var(--hero-overlay); }
.home-hero-title { color: var(--hero-text) !important; }
.home-hero-copy { color: var(--hero-muted) !important; }
.home-hero-kicker { color: var(--hero-kicker) !important; }
.home-hero-panel { border-color: var(--line); background: var(--hero-panel); color: var(--hero-text); }
.article-body { color: var(--article-ink); font-size: 1.03rem; line-height: 1.9; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { color: var(--ink); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; margin: 2.3em 0 .75em; }
.article-body h1 { font-size: 2.1rem; margin-top: 0; }
.article-body h2 { font-size: 1.65rem; border-top: 1px solid rgba(20,20,19,.15); padding-top: 1em; }
.article-body h3 { font-size: 1.25rem; }
.article-body h2, .article-body h3 { scroll-margin-top: 108px; }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote, .article-body table { margin: 1.1em 0; }
.article-body ul, .article-body ol { padding-left: 2.2em; }
.article-body ul, .article-body ol { list-style: none; counter-reset: heatlab-list; }
.article-body li { position: relative; padding-left: .3em; margin: .35em 0; }
.article-body ul:not(.task-list) > li::before { position: absolute; left: -1.45em; color: var(--ink); content: '•'; font-weight: 700; }
.article-body ol > li { counter-increment: heatlab-list; }
.article-body ol > li::before { position: absolute; left: -1.65em; color: var(--ink); content: counter(heatlab-list) '.'; font-weight: 700; }
.article-body ul ul:not(.task-list) > li::before { content: '◦'; }
.article-body ul ul ul:not(.task-list) > li::before { content: '▪'; }
.article-body ol ol { counter-reset: heatlab-list; }
.article-body ol ol > li::before { content: counter(heatlab-list, lower-alpha) '.'; }
.article-body ol ol ol { counter-reset: heatlab-list; }
.article-body ol ol ol > li::before { content: counter(heatlab-list, lower-roman) '.'; }
.article-body ul.task-list { list-style: none; padding-left: 0; }
.article-body .task-list-item { display: flex; align-items: flex-start; gap: .55em; padding-left: 0; }
.article-body .task-list-control { position: relative; display: inline-flex; width: 1.05em; height: 1.05em; flex: 0 0 auto; align-items: center; justify-content: center; margin-top: .35em; cursor: default; }
.article-body .task-list-control input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.article-body .task-list-indicator { display: block; width: 1em; height: 1em; border: 1.5px solid rgba(20,20,19,.42); border-radius: 3px; background: #fff; }
.article-body .task-list-control input:checked + .task-list-indicator { border-color: var(--ember); background: var(--ember); }
.article-body .task-list-control input:checked + .task-list-indicator::after { display: block; width: .42em; height: .22em; margin: .17em 0 0 .23em; border-bottom: 1.5px solid #fff; border-left: 1.5px solid #fff; content: ''; transform: rotate(-45deg); }
.article-body .arithmatex { color: var(--ink); }
.article-body .arithmatex:not(div) { display: inline-block; max-width: 100%; vertical-align: baseline; }
.article-body div.arithmatex { max-width: 100%; margin: 1.7em 0; overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 4px; background: var(--surface-muted); padding: .85em .9em; line-height: 1.45; text-align: center; }
.article-body a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.article-body img { display: block; max-width: 100%; height: auto; margin: 2em auto; border: 1px solid rgba(20,20,19,.12); }
.article-body blockquote { border-left: 3px solid var(--ember); background: rgba(255,255,255,.7); padding: .75em 1em; color: rgba(20,20,19,.65); }
.article-body code { border-radius: 4px; background: rgba(20,20,19,.08); padding: .12em .35em; font: .88em 'DM Mono', monospace; }
.article-body pre { overflow-x: auto; border-radius: 8px; background: #1b1b19; color: #e9e8e3; padding: 18px; font: .82em/1.7 'DM Mono', monospace; }
.article-body pre code { background: transparent; padding: 0; }
.article-body table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .9em; }
.article-body th, .article-body td { border: 1px solid rgba(20,20,19,.15); padding: 8px 12px; text-align: left; }
.article-body th { background: rgba(20,20,19,.06); }
.article-body .footnote { font-size: .85em; color: rgba(20,20,19,.6); }
.article-body :not(pre) > code {
  border: 1px solid rgba(20,20,19,.14);
  border-radius: 4px;
  background: #f2f5f3;
  color: #24322b;
  padding: .12em .34em;
  font: .88em 'DM Mono', monospace;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.article-body mark {
  border-radius: 3px;
  background: #dbe9e2;
  color: #17261f;
  padding: .08em .22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.article-body .highlight {
  position: relative;
  margin: 1.75em 0;
  overflow: hidden;
  border: 1px solid #2d332f;
  border-radius: 8px;
  background: #171a18;
  color: #e8ece9;
  box-shadow: 0 10px 28px rgba(20,20,19,.1);
}
.article-body .highlight .code-window-bar {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: #202421;
  padding: 0 10px 0 14px;
}
.article-body .highlight .code-window-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.article-body .highlight .code-window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.article-body .highlight .code-window-dot:nth-child(1) { background: #ef6a61; }
.article-body .highlight .code-window-dot:nth-child(2) { background: #e8ba55; }
.article-body .highlight .code-window-dot:nth-child(3) { background: #65c466; }
.article-body .highlight .code-language {
  min-width: 0;
  overflow: hidden;
  color: rgba(255,255,255,.62);
  font: 500 10px/1 'DM Mono', monospace;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.article-body .highlight .code-window-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.article-body .highlight .code-copy-button {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(255,255,255,.68);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.article-body .highlight .code-copy-button:hover { background: rgba(255,255,255,.09); color: #fff; }
.article-body .highlight .code-copy-button:active { transform: scale(.94); }
.article-body .highlight .code-copy-button:focus-visible { outline: 2px solid #a6d9c1; outline-offset: 2px; }
.article-body .highlight .code-copy-button[data-copy-state='copied'] { color: #9ed1af; }
.article-body .highlight .code-copy-button[data-copy-state='error'] { color: #f0a6a0; }
.article-body .highlight .code-copy-button svg { width: 16px; height: 16px; stroke-width: 1.8; }
.article-body .highlight pre {
  margin: 0;
  overflow-x: auto;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 18px 20px 20px;
  font: .84em/1.75 'DM Mono', monospace;
  tab-size: 4;
}
.article-body .highlight pre code {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
}
.article-body .highlight .hll { background: rgba(166,217,193,.12); }
.article-body .highlight .c, .article-body .highlight .ch, .article-body .highlight .cm, .article-body .highlight .cp, .article-body .highlight .cpf, .article-body .highlight .c1, .article-body .highlight .cs { color: #87908a; font-style: italic; }
.article-body .highlight .err { color: #f19b96; }
.article-body .highlight .k, .article-body .highlight .kc, .article-body .highlight .kd, .article-body .highlight .kn, .article-body .highlight .kp, .article-body .highlight .kr, .article-body .highlight .kt, .article-body .highlight .ow { color: #c9aff2; }
.article-body .highlight .m, .article-body .highlight .mb, .article-body .highlight .mf, .article-body .highlight .mh, .article-body .highlight .mi, .article-body .highlight .mo, .article-body .highlight .il { color: #e1bd82; }
.article-body .highlight .s, .article-body .highlight .sa, .article-body .highlight .sb, .article-body .highlight .sc, .article-body .highlight .dl, .article-body .highlight .sd, .article-body .highlight .s2, .article-body .highlight .se, .article-body .highlight .sh, .article-body .highlight .si, .article-body .highlight .sx, .article-body .highlight .sr, .article-body .highlight .s1, .article-body .highlight .ss { color: #a8d9af; }
.article-body .highlight .na, .article-body .highlight .nb, .article-body .highlight .nc, .article-body .highlight .nd, .article-body .highlight .ne, .article-body .highlight .nf, .article-body .highlight .fm, .article-body .highlight .nl, .article-body .highlight .nn, .article-body .highlight .nt, .article-body .highlight .nv, .article-body .highlight .vc, .article-body .highlight .vg, .article-body .highlight .vi, .article-body .highlight .vm { color: #83c7d0; }
.article-body .highlight .o, .article-body .highlight .p { color: #d6dbd8; }
.article-body .highlight .w { color: #929a95; }
.article-body .admonition {
  --admonition-accent: #4b5563;
  --admonition-surface: #f7f8f9;
  margin: 1.65em 0;
  border: 1px solid rgba(20,20,19,.13);
  border-left: 3px solid var(--admonition-accent);
  border-radius: 6px;
  background: var(--admonition-surface);
  padding: .95em 1em 1em 1.05em;
  color: rgba(20,20,19,.76);
}
.article-body .admonition > :first-child { margin-top: 0; }
.article-body .admonition > :last-child { margin-bottom: 0; }
.article-body .admonition .admonition-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--admonition-accent);
  font-size: .86em;
  font-weight: 800;
  line-height: 1.35;
}
.article-body .admonition .admonition-title svg { width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.9; }
.article-body .admonition.note { --admonition-accent: #415366; --admonition-surface: #f5f7f8; }
.article-body .admonition.tip { --admonition-accent: #27624e; --admonition-surface: #f3faf6; }
.article-body .admonition.important { --admonition-accent: #445080; --admonition-surface: #f5f6fc; }
.article-body .admonition.warning { --admonition-accent: #87601f; --admonition-surface: #fffbf1; }
.article-body .admonition.caution { --admonition-accent: #8b3c3c; --admonition-surface: #fff5f5; }
.article-body mjx-container[jax='CHTML'][display='true'] {
  display: block !important;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1.7em 0 !important;
  padding: .55em .15em;
  text-align: center;
}
.article-body mjx-container[jax='CHTML']:not([display='true']) { margin: 0 .08em; }
.heatlab-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
  white-space: nowrap;
}
.toc-list a { display: block; border-left: 1px solid rgba(20,20,19,.18); padding: 6px 0 6px 12px; color: rgba(20,20,19,.58); font-size: 13px; line-height: 1.45; transition: border-color .2s, color .2s; }
.toc-list a:hover { border-color: var(--ember); color: var(--ink); }
.toc-list a.active { border-color: var(--ember); color: var(--ember); font-weight: 600; }
:root[data-theme='dark'] .toc-list a { color: rgba(244,244,244,.5); border-left-color: rgba(255,255,255,.15); }
:root[data-theme='dark'] .toc-list a:hover { color: var(--ink); border-left-color: var(--ember); }
:root[data-theme='dark'] .toc-list a.active { color: var(--ember); }
.comment-item { border-top: 1px solid rgba(20,20,19,.12); padding: 18px 0; }
.comment-reply { margin-left: 25px; border-left: 2px solid rgba(255,92,53,.25); padding-left: 16px; }
.annotation-note { border-left: 2px solid var(--ink); background: white; padding: 13px 14px; font-size: 12px; }
.annotation-highlight { text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tag { border: 1px solid rgba(20,20,19,.14); border-radius: 999px; padding: 7px 11px; font-size: 12px; color: rgba(20,20,19,.62); transition: border-color .2s, color .2s; }
.tag:hover { border-color: var(--ember); color: var(--ember); }
.tag-active { border-color: var(--ink); background: var(--ink); color: white; }
.article-nav-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 15px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.field { width: 100%; resize: vertical; border: 1px solid rgba(20,20,19,.15); background: rgba(255,255,255,.75); padding: 10px 12px; font-size: 12px; line-height: 1.5; outline: none; }
.field:focus { border-color: var(--ember); box-shadow: 0 0 0 2px rgba(255,92,53,.12); }
.section-label { border-top: 1px solid rgba(20,20,19,.14); padding-top: 14px; font: 500 10px/1.2 'DM Mono', monospace; letter-spacing: .15em; text-transform: uppercase; color: rgba(20,20,19,.5); }
form input:not([type='hidden']):not([type='submit']):not([type='file']), form select, form textarea { display: block; width: 100%; margin-top: 7px; border: 1px solid rgba(20,20,19,.16); background: rgba(255,255,255,.7); padding: 11px 12px; font-size: 13px; outline: none; }
form input:focus, form select:focus, form textarea:focus { border-color: var(--ember); box-shadow: 0 0 0 2px rgba(20,20,19,.08); }
.site-header form input { display: block; width: 100%; margin: 0; border: 0; background: transparent; padding: 0; box-shadow: none; }
.site-header form input:focus { border: 0; box-shadow: none; }
.theme-toggle { color: var(--ink); }
:root[data-theme='dark'] .bg-mist { background-color: #000000 !important; }
:root[data-theme='dark'] .bg-white, :root[data-theme='dark'] .bg-white\/80, :root[data-theme='dark'] .bg-white\/70 { background-color: var(--surface) !important; }
:root[data-theme='dark'] .text-ink, :root[data-theme='dark'] .text-black, :root[data-theme='dark'] .text-black\/75, :root[data-theme='dark'] .text-black\/70, :root[data-theme='dark'] .text-black\/65, :root[data-theme='dark'] .text-black\/60, :root[data-theme='dark'] .text-black\/55, :root[data-theme='dark'] .text-black\/50, :root[data-theme='dark'] .text-black\/45, :root[data-theme='dark'] .text-black\/40 { color: var(--ink) !important; }
:root[data-theme='dark'] .border-black\/5, :root[data-theme='dark'] .border-black\/10, :root[data-theme='dark'] .border-black\/15, :root[data-theme='dark'] .border-black\/20, :root[data-theme='dark'] .border-black\/25 { border-color: var(--line) !important; }
:root[data-theme='dark'] .article-body blockquote, :root[data-theme='dark'] .field { background: var(--surface) !important; color: var(--article-ink); }
:root[data-theme='dark'] .article-body :not(pre) > code { background: #242424; color: #f2f2f2; border-color: rgba(255,255,255,.2); }
:root[data-theme='dark'] .site-header { background: rgba(0,0,0,.92) !important; border-color: rgba(255,255,255,.16) !important; }
:root[data-theme='dark'] .site-header .stats-panel { background: #141414 !important; border-color: rgba(255,255,255,.22) !important; }
:root[data-theme='dark'] .site-header .stat-chip, :root[data-theme='dark'] .site-header .stat-chip b, :root[data-theme='dark'] .site-header .stat-chip em { color: rgba(245,245,245,.82) !important; }
:root[data-theme='dark'] .site-header form { border-color: rgba(255,255,255,.35) !important; }
:root[data-theme='dark'] .site-header form input { background: transparent !important; color: var(--ink) !important; }
:root[data-theme='dark'] .site-header form input::placeholder, :root[data-theme='dark'] .site-header kbd { color: rgba(245,245,245,.5) !important; }
:root[data-theme='dark'] .site-header .nav-link, :root[data-theme='dark'] .site-header a, :root[data-theme='dark'] .site-header .icon-button { color: rgba(245,245,245,.82) !important; }
:root[data-theme='dark'] .site-header .nav-link:hover, :root[data-theme='dark'] .site-header a:hover, :root[data-theme='dark'] .site-header .icon-button:hover { color: #fff !important; }
:root[data-theme='dark'] .text-ember { color: var(--ember) !important; }
:root[data-theme='dark'] .hover\:text-ember:hover { color: var(--ember) !important; }
:root[data-theme='dark'] .group:hover .group-hover\:text-ember { color: var(--ember) !important; }
:root[data-theme='dark'] .border-ember { border-color: var(--ember) !important; }
:root[data-theme='dark'] .hover\:border-ember:hover { border-color: var(--ember) !important; }
:root[data-theme='dark'] .bg-ember { background-color: var(--ember) !important; color: #111 !important; }
:root[data-theme='dark'] .text-black\/35 { color: rgba(244,244,244,.45) !important; }
:root[data-theme='dark'] mark.bg-\[\#dbe9e2\] { background: #2a3a32 !important; color: #c8e6d5 !important; }
:root[data-theme='dark'] .eyebrow { color: rgba(244,244,244,.45) !important; }
:root[data-theme='dark'] .tag { border-color: rgba(255,255,255,.15) !important; color: rgba(244,244,244,.6) !important; }
:root[data-theme='dark'] .tag-active { border-color: var(--ember) !important; background: var(--ember) !important; color: #111 !important; }
:root[data-theme='dark'] .eyebrow { color: rgba(244,244,244,.45) !important; }
:root[data-theme='dark'] .tag { border-color: rgba(244,244,244,.18) !important; color: rgba(244,244,244,.65) !important; }
:root[data-theme='dark'] .tag-active { background: var(--ember) !important; border-color: var(--ember) !important; color: #111 !important; }
:root[data-theme='dark'] .border-black\/5, :root[data-theme='dark'] .border-black\/10, :root[data-theme='dark'] .border-black\/15, :root[data-theme='dark'] .border-black\/20, :root[data-theme='dark'] .border-black\/25 { border-color: var(--line) !important; }
@media (max-width: 640px) {
  .stats-panel { display: none !important; }
  .article-body { font-size: .98rem; }
  .article-body .highlight { margin: 1.4em 0; border-radius: 6px; }
  .article-body .highlight .code-window-bar { min-height: 40px; padding: 0 8px 0 12px; }
  .article-body .highlight pre { padding: 16px; font-size: .8em; }
  .article-body mjx-container[jax='CHTML'][display='true'] { margin: 1.35em 0 !important; padding: .5em 0; }
}
@media (prefers-reduced-motion: reduce) {
  .article-body .highlight .code-copy-button { transition: none; }
}