:root { --ink: #141413; --ember: #202020; --mist: #ffffff; }
* { box-sizing: border-box; }
html { background: var(--mist); }
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; }
.article-body { color: rgba(20,20,19,.8); 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: 1.4em; }
.article-body li { padding-left: .3em; margin: .35em 0; }
.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); }
.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; }
@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; }
}