/* SentryWard blog, in the style of the vLLM, LMSYS (SGLang), and MPK blog posts: one
   column of text, figures in the style of the paper, centered gray captions.
   Figure colors are the paper's: swHB blue, swBad red, swGood green, black!7 gray. */

:root {
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --rule: #e2e8f0;
  --link: #2563eb;
  --code-bg: #f6f8fa;
  --step-bg: #e8edfb;
  --hb: #1e5c9b;
  --bad: #af232d;
  --good: #286e32;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 17px/1.72 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.topbar { border-bottom: 1px solid var(--rule); }
.topbar .in { max-width: 1100px; margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: var(--text); }
.brand:hover { text-decoration: none; }
.topnav { display: flex; gap: 22px; font-size: 15px; color: var(--muted); }

/* ---------- Article ---------- */
article { max-width: 768px; margin: 0 auto; padding: 34px 24px 72px; }
.crumb { color: var(--muted); font-size: 15px; }
h1 { font-size: 38px; line-height: 1.2; letter-spacing: -0.022em; margin: 10px 0 14px; font-weight: 800; }
.meta { color: var(--muted); font-size: 15px; }
.authors { color: var(--text-2); font-size: 15.5px; line-height: 1.55; margin-top: 10px; }
.links { text-align: center; font-weight: 600; margin: 28px 0; }
.links .sep { color: #cbd5e1; margin: 0 10px; font-weight: 400; }
.links .soon { color: var(--muted); font-weight: 500; font-size: 14px; }
h2 { font-size: 27px; line-height: 1.3; letter-spacing: -0.015em; margin: 54px 0 14px; font-weight: 750; }
h3 { font-size: 20.5px; line-height: 1.35; margin: 38px 0 10px; font-weight: 700; }
h4 { font-size: 17.5px; line-height: 1.4; margin: 30px 0 8px; font-weight: 650; }
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-left: 1.4em; }
li { margin: 5px 0; }
b, strong { font-weight: 650; }
.katex { font-size: 1.12em; }
.eq { margin: 0 0 18px; overflow-x: auto; overflow-y: hidden; }
.eq .katex-display { margin: 0.4em 0; }
code {
  font-family: Inconsolata, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.97em;
  background: var(--code-bg);
  border-radius: 4px;
  padding: 0.08em 0.34em;
}
pre {
  font: 15.5px/1.55 Inconsolata, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--code-bg);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 22px;
  overflow-x: auto;
}
pre .c { color: #6a737d; }
pre .bad { color: var(--bad); font-weight: 700; }
pre del { text-decoration-thickness: 1.5px; }
/* Circled step numbers, as \step in the paper. */
.sn {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid #4d4d4d; background: #fff;
  font: 700 10.5px/1 Inter, system-ui, sans-serif; color: #111;
  vertical-align: 1px; margin-left: 2px;
}
.tbd { color: #b45309; }

/* ---------- Figures ---------- */
figure { margin: 36px 0; }
figure.wide { width: min(1000px, calc(100vw - 32px)); margin-left: 50%; transform: translateX(-50%); }
figcaption { color: var(--muted); font-size: 15px; line-height: 1.55; text-align: center; margin: 12px auto 0; max-width: 768px; }
.anim { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.anim.static { cursor: default; }
.anim-step {
  text-align: left;
  background: var(--step-bg);
  border-radius: 6px;
  padding: 9px 44px 9px 14px;
  font-size: 15px;
  line-height: 1.5;
  min-height: 3.75em;
  margin: 0 auto 14px;
  max-width: 768px;
}
.anim-step code { background: rgba(255, 255, 255, 0.75); }
.anim-stage { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.anim-stage > svg { display: block; width: 100%; height: auto; }
.anim-pp {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(15, 23, 42, 0.07);
  display: grid; place-items: center;
  opacity: 0; transition: opacity 0.2s;
}
.anim-pp svg { width: 11px; height: 11px; fill: var(--muted); }
.anim:hover .anim-pp, .anim.paused .anim-pp { opacity: 1; }
.fig-error { color: var(--bad); font-size: 14px; }
.ph-fig {
  border: 1.5px dashed #cbd5e1; border-radius: 8px; background: #f8fafc;
  color: var(--muted); text-align: center; font-size: 15px; padding: 46px 20px;
}

/* Text inside figures */
.anim svg text { font-family: Inter, "Helvetica Neue", Arial, sans-serif; fill: #111827; }
.anim svg .mono { font-family: Inconsolata, "JetBrains Mono", Menlo, monospace; font-size: 1.06em; }
.anim svg .mi, .anim svg .sub { font-family: KaTeX_Math, "Times New Roman", Times, serif; font-style: italic; }
.anim svg .mw { font-family: KaTeX_Main, "Times New Roman", Times, serif; font-style: italic; font-size: 1.14em; }
.anim svg .mi { font-size: 1.14em; }
.anim svg .sub { font-size: 0.8em; }
.anim svg .sup { font-size: 0.75em; }
.anim svg .muted { fill: #666; }
.anim svg .it { font-style: italic; }
.anim svg .bold { font-weight: 650; }
.anim svg .role { font-style: italic; fill: #666; }
.anim svg .hbtext { fill: var(--hb); }
.anim svg .badtext { fill: var(--bad); }
.anim svg .goodtext { fill: var(--good); }

/* Boxes and lines, after the paper's TikZ styles */
.box { fill: #fff; stroke: #737373; stroke-width: 1; }
.box.hw { fill: #ededed; }
.box.ph { fill: #f0f0ff; stroke: var(--hb); stroke-width: 1.2; }
.box.mem { fill: #f7f7f7; stroke: #666; }
.box.mem.filled { fill: #e3ebf6; }
.box.bar { fill: #f0f0ff; stroke: var(--hb); stroke-width: 1.2; }
.box.st { fill: #f2f2ff; stroke: #666; }
.box.st1 { fill: #f5f5f5; stroke: #666; }
.box.chip { fill: #d6e3f4; stroke: #4d4d4d; stroke-width: 0.8; }
.box.on { stroke: var(--hb); stroke-width: 2.2; }
.box.good { fill: #def0e0; stroke: var(--good); stroke-width: 1.8; }
.box.bad { fill: #fbe5e6; stroke: var(--bad); stroke-width: 2; }
.box.omit { fill: #f2f2f2; stroke: #a6a6a6; stroke-dasharray: 3 2; }
.box.memop { fill: #f5f5f5; }
.box.memop.good { fill: #def0e0; }
.box.memop.bad { fill: #fbe5e6; }
.box.grp { fill: #f5f5ff; stroke: #666; }
.box.body { fill: #fff; stroke: #a6a6a6; }
.flash { fill: none; stroke: #7aa7dd; stroke-width: 5; opacity: 0; }
.ln { fill: none; stroke: #4d4d4d; stroke-width: 1.2; marker-end: url(#m-dep); }
.ln.faint { stroke: #b3b3b3; marker-end: url(#m-faint); }
.ln.hb { stroke: var(--hb); stroke-width: 1.6; marker-end: url(#m-hb); }
.ln.hb.path { stroke-width: 3; }
.ln.data { stroke: #404040; stroke-width: 2.2; marker-end: url(#m-data); }
.ln.start { stroke: #737373; stroke-width: 1; stroke-dasharray: 4 2.5; marker-end: url(#m-dash); }
.ln.link { stroke: var(--good); stroke-width: 1.2; stroke-dasharray: 4 2.5; marker-end: url(#m-good); }
.ln.bad { stroke: var(--bad); marker-end: url(#m-bad); }
.ln.gone { stroke: var(--bad); stroke-dasharray: 4 3; marker-end: none; }
.ln.race { stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 5 3; marker-end: none; }
.ln.nomark { marker-end: none; }
.bracket { fill: none; stroke: #8c8c8c; stroke-width: 1; }
.sep { stroke: #bfbfbf; stroke-width: 1; }
.dot { fill: var(--hb); }
.xmark { stroke: var(--bad); stroke-width: 3; stroke-linecap: round; fill: none; }
.stepc circle { fill: #fff; stroke: #4d4d4d; stroke-width: 1; }
.stepc text { font-weight: 700; }
.stepc.on circle { fill: var(--hb); stroke: var(--hb); }
.stepc.on text { fill: #fff; }
.pnode.input .box { fill: #f7f7f7; stroke: #999; }
.pnode.artifact .box { fill: #f5f5ff; stroke: var(--hb); }
.pnode.stage .box { fill: #fff; stroke: #8c8c8c; }
.pnode.lit .box { stroke-width: 1.8; }
.pnode.active .box { stroke: var(--hb); stroke-width: 2.8; }
.mk-dep { fill: #4d4d4d; }
.mk-faint { fill: #b3b3b3; }
.mk-hb { fill: var(--hb); }
.mk-data { fill: #404040; }
.mk-dash { fill: #737373; }
.mk-good { fill: var(--good); }
.mk-bad { fill: var(--bad); }

/* The two schedules (paper Fig. 7) */
.sched { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.sched-title { text-align: center; font-size: 14.5px; margin-bottom: 6px; }
table.booktabs { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; border-top: 1.5px solid #333; border-bottom: 1.5px solid #333; }
table.booktabs th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #333; }
table.booktabs td { padding: 6px 8px; white-space: nowrap; }
table.booktabs td.st { text-align: center; }
table.booktabs tr.ph td { background: #ebebff; }
table.booktabs tr.bad td { background: #ffebeb; color: var(--bad); }
table.booktabs tr.good td { background: #e6f5e8; color: var(--good); }

footer { border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; padding: 26px 24px 40px; text-align: center; }

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  h1 { font-size: 30px; }
  h2 { font-size: 23px; }
  article { padding: 26px 18px 56px; }
  .sched { grid-template-columns: 1fr; }
  .topnav { gap: 14px; }
}

/* Previous / next stepping (Figure 2) */
.stepper-head { display: flex; gap: 8px; align-items: stretch; max-width: 768px; margin: 0 auto 14px; }
.stepper-head .anim-step { flex: 1; margin: 0; padding-right: 14px; }
.step-btn {
  flex: none; width: 40px; padding: 0;
  border: 1px solid var(--rule); border-radius: 6px; background: #fff; color: var(--text-2);
  display: grid; place-items: center; cursor: pointer;
}
.step-btn:hover:not(:disabled) { border-color: #94a3b8; background: #f8fafc; }
.step-btn:disabled { opacity: 0.35; cursor: default; }
.step-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.step-btn svg { width: 16px; height: 16px; }
table.booktabs tr { transition: opacity 0.3s; }
@keyframes rowflash { from { box-shadow: inset 0 0 0 999px rgba(30, 92, 155, 0.14); } to { box-shadow: inset 0 0 0 999px rgba(30, 92, 155, 0); } }
table.booktabs tr.fresh td { animation: rowflash 1.2s ease-out; }

/* Correct / buggy kernel switch (Figure 5) */
.kswitch { display: flex; justify-content: center; margin: 0 auto 12px; }
.kswitch .seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 9px; background: #f8fafc; }
.kswitch button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font: 500 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
}
.kswitch button:hover { color: var(--text); }
.kswitch button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(15, 23, 42, 0.08); }
.kswitch button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.kswitch .kdot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.kswitch .buggy .kdot { background: var(--bad); }
svg.hbfig .only-c, svg.hbfig .only-b { transition: opacity 0.35s; }
svg.hbfig.buggy .only-c, svg.hbfig:not(.buggy) .only-b { opacity: 0; }

/* Memory elimination table (Figure 9): matching colors mark the same address */
.tab-wrap { overflow-x: auto; }
table.booktabs.memtab { width: auto; margin: 0 auto; }
table.memtab code.a1 { color: #1e5c9b; background: #e6eef8; }
table.memtab code.a2 { color: #6d28d9; background: #f0eafd; }
table.memtab code.a3 { color: #0f766e; background: #e2f3f0; }

/* Kernel time after removing redundant synchronization (Figure 14) */
.anim svg .sr-grid { stroke: #e5e7eb; stroke-width: 1; }
.anim svg .sr-zero { stroke: #9ca3af; stroke-width: 1.2; }
.anim svg .sr-median { stroke: var(--hb); stroke-width: 1.2; stroke-dasharray: 4 3; }
.anim svg .sr-dot { fill: var(--hb); }

/* Equivalence example (Figure 10): the reference, the kernel, and the equalities to prove */
.pfig { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; max-width: 920px; margin: 0 auto; font-size: 15px; line-height: 1.5; }
.pcard { border: 1px solid var(--rule); border-radius: 8px; padding: 12px 16px; overflow-x: auto; }
.pcard.pref { background: #f4f8fc; border-color: #cfdcec; }
.pcard.pker { background: #f8f5fe; border-color: #e0d5f6; }
.pcard.pgoal { grid-column: 1 / -1; }
.ptitle { font-weight: 600; margin-bottom: 6px; }
.pref .ptitle { color: #1e5c9b; }
.pker .ptitle { color: #6d28d9; }
.prows { display: grid; grid-template-columns: max-content max-content; grid-auto-rows: 30px; column-gap: 16px; align-items: center; white-space: nowrap; }
.plab { color: var(--muted); font-size: 13px; }
.pnote { color: var(--muted); font-style: italic; font-size: 13.5px; }
.pgoals { display: grid; grid-template-columns: max-content max-content minmax(14em, 1fr); column-gap: 18px; row-gap: 5px; align-items: baseline; }
.pgoals > span:nth-child(3n + 2) { white-space: nowrap; }
.pnum { color: #fff; background: #475569; border-radius: 50%; width: 1.5em; height: 1.5em; font-size: 12px; font-weight: 600; text-align: center; line-height: 1.5em; align-self: center; }
.pwhy { color: var(--muted); }
@media (max-width: 760px) {
  .pfig { grid-template-columns: minmax(0, 1fr); }
  .pb { display: none; }
  .pgoals { grid-template-columns: max-content minmax(0, 1fr); }
  .pwhy { grid-column: 2; margin-bottom: 4px; }
}