:root {
  --bg: #fbfaf7;
  --fg: #1d2127;
  --muted: #6b7079;
  --rule: #e5e2dc;
  --accent: #1f6a86;
  --accent-soft: #e3eff3;
  --code-bg: #f3f1ec;
  --banner-bg: #fbf1dc;
  --banner-fg: #7a5412;
  --fig-ink: #3b4049;
  --fig-faint: #9aa0a8;
  --fig-panel: #f1efea;
  --fig-code: #d7e6f3;
  --fig-code-line: #6f96bd;
  --fig-scale: #f5dcbd;
  --fig-scale-line: #b56f24;
  --fig-tensor: #dcebd6;
  --fig-tensor-line: #4f8746;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

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

/* header / footer */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  font-family: var(--sans);
}
.site-title { color: var(--fg); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.site-nav { display: flex; gap: 1.25rem; font-size: 0.9rem; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--fg); text-decoration: none; }

.site-footer { margin-top: 5rem; border-top: 1px solid var(--rule); }
.site-footer .wrap { padding-top: 1.5rem; padding-bottom: 2.5rem; font-family: var(--sans); font-size: 0.82rem; color: var(--muted); }

/* headings */
h1, h2, h3, h4 { font-family: var(--sans); color: var(--fg); letter-spacing: -0.015em; line-height: 1.25; }
h1 { font-size: 2rem; font-weight: 700; margin: 0 0 0.5rem; }
h2 { font-size: 1.35rem; font-weight: 600; margin: 3rem 0 0.75rem; }
h3 { font-size: 1.1rem; font-weight: 600; margin: 2rem 0 0.5rem; }

p { margin: 0 0 1.15rem; }
.muted { color: var(--muted); }

/* home */
.intro { padding-top: 3.5rem; }
.intro p { color: var(--fg); font-size: 1.15rem; }
.post-list h2 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; margin-top: 3rem;
}
.post-list ul { list-style: none; padding: 0; margin: 0; }
.post-list li { padding: 0.9rem 0; border-top: 1px solid var(--rule); }
.post-list time { display: block; font-family: var(--sans); font-size: 0.82rem; color: var(--muted); }
.post-list li > a { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; color: var(--fg); }
.post-list li > a:hover { color: var(--accent); text-decoration: none; }
.post-list li p { margin: 0.2rem 0 0; color: var(--muted); font-size: 1rem; }

/* post */
.post { padding-top: 3rem; }
.post-header { margin-bottom: 2.25rem; }
.post-meta { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin: 0; }
.draft-banner {
  font-family: var(--sans); font-size: 0.85rem;
  background: var(--banner-bg); color: var(--banner-fg);
  border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 2rem;
}
.post-body > h2:first-child { margin-top: 0; }

ul, ol { padding-left: 1.4rem; margin: 0 0 1.15rem; }
li { margin: 0.25rem 0; }
blockquote { margin: 1.5rem 0; padding: 0.1rem 0 0.1rem 1.1rem; border-left: 3px solid var(--rule); color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
strong { font-weight: 600; }

/* code */
code, pre { font-family: var(--mono); }
:not(pre) > code {
  font-size: 0.84em; background: var(--code-bg);
  padding: 0.12em 0.35em; border-radius: 4px;
}
pre, div.highlight pre {
  background: var(--code-bg);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.4rem;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
}
div.highlighter-rouge { margin: 0 0 1.4rem; }
div.highlighter-rouge pre { margin: 0; }
.highlight .c, .highlight .c1, .highlight .cm { color: var(--muted); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kt { color: var(--accent); }
.highlight .s, .highlight .s1, .highlight .s2 { color: var(--fig-tensor-line); }
.highlight .m, .highlight .mi, .highlight .mf { color: var(--fig-scale-line); }

/* tables */
table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.5rem;
  font-family: var(--sans); font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
th, td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); text-align: left; }
th { font-weight: 600; border-bottom-width: 2px; }

/* math */
.katex-display { margin: 1.4rem 0; overflow-x: auto; overflow-y: hidden; padding: 0.2rem 0; }
.katex { font-size: 1.05em; }

/* figures */
figure.fig { margin: 2rem 0 2.2rem; }
figure.fig .fig-scroll { overflow-x: auto; }
figure.fig svg { display: block; width: 100%; height: auto; }
figure.fig figcaption {
  font-family: var(--serif); font-size: 0.95rem; line-height: 1.6;
  color: var(--muted); margin-top: 0.9rem;
}
figure.fig figcaption .fig-num {
  font-family: var(--serif); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg);
  margin-right: 0.55em;
}
figure.fig figcaption em { color: var(--fig-scale-line); }
.fig text { font-family: var(--serif); fill: var(--fig-ink); }
.fig .t-small { font-size: 15px; }
.fig .t-label { font-size: 16px; font-weight: 600; }
.fig .t-faint { fill: var(--muted); }
.fig .t-scale { fill: var(--fig-scale-line); font-weight: 600; }
.fig .t-tensor { fill: var(--fig-tensor-line); font-weight: 600; }
.fig .axis { stroke: var(--fig-faint); stroke-width: 1.5; }
.fig .tick { stroke: var(--fig-faint); stroke-width: 1.5; }
.fig .grid-pt { fill: var(--fig-ink); }
.fig .dot { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.fig .snap { stroke: var(--accent); stroke-width: 1.4; fill: none; opacity: 0.75; }
.fig .arrowhead { fill: var(--accent); opacity: 0.75; }
.fig .bracket { stroke: var(--fig-faint); stroke-width: 1.2; fill: none; }
.fig .panel { fill: var(--fig-panel); }
.fig .code { fill: var(--fig-code); stroke: var(--fig-code-line); stroke-width: 1.2; }
.fig .code-line { stroke: var(--fig-code-line); stroke-width: 0.8; opacity: 0.55; }
.fig .scale { fill: var(--fig-scale); stroke: var(--fig-scale-line); stroke-width: 1.2; }
.fig .tensor { fill: var(--fig-tensor); stroke: var(--fig-tensor-line); stroke-width: 1.2; }

.fig-line { color: var(--fig-ink); }
.fig .blk { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0.7; }
.fig .cell { stroke: currentColor; stroke-width: 0.8; opacity: 0.22; }
.fig .chip { fill: var(--fig-scale); stroke: var(--fig-scale-line); stroke-width: 1; }
.fig .ln-faint { stroke: currentColor; stroke-width: 1.1; fill: none; opacity: 0.45; }

.fig .t-math { font-family: var(--serif); font-style: italic; font-size: 17px; }
.fig .fade { opacity: 0.32; }
.fig .ln { stroke: currentColor; stroke-width: 1.2; fill: none; opacity: 0.75; }
.fig .box { fill: var(--fig-panel); stroke: currentColor; stroke-width: 1; stroke-opacity: 0.35; }
.fig .box.acc { stroke-opacity: 0.7; }
.fig .hl { fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: 0.4; stroke-dasharray: 3 3; }

.fig .win { fill: var(--fig-panel); stroke: currentColor; stroke-width: 1; stroke-opacity: 0.35; stroke-dasharray: 4 3; }
.fig .sdot { fill: var(--fig-scale); stroke: var(--fig-scale-line); stroke-width: 1; }
.fig .t-sup { font-size: 10px; }

.fig .sdot.raw { fill: var(--bg); }
.fig .t-mi { font-family: var(--serif); font-style: italic; font-size: 15px; }
.fig .t-sub { font-size: 10px; }
figure.fig table { margin: 0; }
figure.fig td.zero { color: var(--muted); }

.fig .guide { stroke: currentColor; stroke-width: 1; stroke-opacity: 0.3; stroke-dasharray: 3 3; }
.fig .bar.bf { fill: var(--fig-panel); stroke: currentColor; stroke-opacity: 0.3; }
.fig .bar.e4 { fill: var(--fig-panel); stroke: currentColor; stroke-width: 1.2; stroke-opacity: 0.75; }
.fig .bar.raw { fill: var(--bg); stroke: var(--fig-scale-line); stroke-width: 1.2; }
.fig .bar.st { fill: var(--fig-scale); stroke: var(--fig-scale-line); stroke-width: 1.2; }

.fig .ghost { fill: none; stroke: var(--fig-scale-line); stroke-width: 1.1; stroke-opacity: 0.55; stroke-dasharray: 3 3; }

/* data tables (booktabs style) */
figure.tbl-fig { margin: 2rem 0 2.2rem; }
figure.tbl-fig .fig-scroll { overflow-x: auto; }
table.tbl {
  width: 100%; border-collapse: collapse; margin: 0;
  font-family: var(--serif); font-size: 0.93rem; line-height: 1.45;
  border-top: 1.5px solid var(--fg); border-bottom: 1.5px solid var(--fg);
}
table.tbl th {
  font-family: var(--serif); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  text-align: left; vertical-align: bottom;
  padding: 0.65rem 0.7rem 0.5rem; border-bottom: 1px solid var(--fg);
}
table.tbl th .unit { text-transform: none; letter-spacing: 0; }
table.tbl td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td:first-child { font-weight: 600; white-space: nowrap; }
table.tbl tr.hl td { background: #fbf1e4; }
table.tbl .sub { display: block; font-weight: 400; font-size: 0.82rem; color: var(--muted); }
table.tbl td:nth-child(3) { white-space: nowrap; }
table.tbl .yes { color: var(--fig-scale-line); font-weight: 600; }
table.tbl .no { color: var(--muted); }
table.tbl .tag {
  display: inline-block; margin-left: 0.4em; padding: 0 0.4em; border-radius: 3px;
  font-family: var(--serif); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--fig-scale-line); border: 1px solid var(--fig-scale-line);
  vertical-align: 0.1em;
}
figure.tbl-fig figcaption { font-family: var(--serif); font-size: 0.95rem; line-height: 1.6; color: var(--muted); margin-top: 0.9rem; }
figure.tbl-fig figcaption .fig-num { font-family: var(--serif); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); margin-right: 0.55em; }

.fig .t-head { font-weight: 600; }

.fig .ln-acc { stroke: var(--fig-scale-line); stroke-width: 1.8; fill: none; }
.fig .acc-fill { fill: var(--fig-scale-line); }
.fig .box.glob { fill: var(--fig-scale); stroke: var(--fig-scale-line); stroke-opacity: 1; }

.fig .barrier { stroke: var(--fig-scale-line); stroke-width: 1.6; stroke-dasharray: 4 3; }
.fig .fade-box { opacity: 0.55; }

/* interactive widgets */
.widget { border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.1rem 1.1rem; margin: 2rem 0 2.2rem; background: #fdfcf9; }
.w-controls { display: flex; flex-wrap: wrap; gap: 0.7rem 1.1rem; align-items: center; margin-bottom: 0.4rem; font-size: 0.95rem; }
.w-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.w-seg button, .w-play { font-family: var(--serif); font-size: 0.9rem; padding: 0.3rem 0.75rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.w-seg button.on { background: var(--fig-scale); color: var(--fg); }
.w-play { border: 1px solid var(--rule); border-radius: 8px; }
.w-slider { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 250px; color: var(--muted); }
.w-slider input { flex: 1; accent-color: var(--fig-scale-line); }
.w-g { color: var(--fg); min-width: 5.5em; }
.w-svg { display: block; width: 100%; height: auto; margin: 0.2rem 0 0.4rem; }
.fig .w-band-s { fill: var(--fig-scale); opacity: 0.45; }
.fig .w-band-n { fill: var(--fig-panel); }
.fig .w-band-n2 { fill: #e9e6df; }
.fig .w-tick { stroke: currentColor; stroke-width: 0.8; opacity: 0.45; }
.fig .w-binhl { fill: none; stroke: var(--fig-scale-line); stroke-width: 1.6; }
.fig .w-gmark { stroke: var(--fig-scale-line); stroke-width: 2; }
.fig .w-lens { fill: var(--fig-scale); opacity: 0.18; }
.fig .t-tick { font-size: 12px; fill: var(--muted); }
.w-bytes { font-size: 0.95rem; margin: 0.2rem 0 0.7rem; color: var(--muted); }
.w-bytes b { color: var(--fig-scale-line); font-weight: 600; }
.w-bits { font-family: var(--mono); font-size: 0.88rem; padding: 0.08rem 0.35rem; background: var(--code-bg); border-radius: 4px; }
.w-bits .eb { color: var(--accent); }
.w-bits .mb { color: var(--fig-scale-line); }
.w-codes { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.w-cell { border: 1px solid var(--rule); border-radius: 4px; text-align: center; padding: 0.15rem 0 0.2rem; font-size: 0.9rem; line-height: 1.3; transition: background 0.15s; }
.w-cell .xv { display: block; font-size: 0.66rem; color: var(--muted); }
.w-cell.diff { background: var(--fig-scale); border-color: var(--fig-scale-line); }
.w-status { font-size: 0.92rem; color: var(--muted); margin-top: 0.55rem; }

/* animation */
.anim { margin: 2rem 0 2.2rem; }
.anim-svg { display: block; width: 100%; height: auto; background: #fdfcf9; border: 1px solid var(--rule); border-radius: 12px; color: var(--fig-ink); }
.anim-svg .a-axis { stroke: var(--fig-faint); stroke-width: 1.4; }
.anim-svg .a-btick { stroke: var(--fig-faint); stroke-width: 1.4; }
.anim-svg .a-ghost { fill: none; stroke: #a9adb4; stroke-width: 1.4; }
.anim-svg .a-mov { fill: var(--accent); }
.anim-svg .a-pulse { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.anim-svg .a-cell { fill: var(--fig-scale); fill-opacity: 0.55; }
.anim-svg .a-cellline { fill: none; stroke: var(--fig-scale-line); stroke-width: 1.3; }
.anim-svg .a-ytri { fill: var(--fig-scale-line); }
.anim-svg .a-tgt { fill: var(--fig-scale-line); }
.anim-svg .a-act { fill: none; stroke: #b3261e; stroke-width: 2; }
.anim-svg .a-yline { stroke: var(--fig-scale-line); stroke-width: 1.8; }
.anim-svg .a-alt { fill: #f1eee7; }
.anim-svg .a-brk { fill: none; stroke: var(--fig-ink); stroke-width: 1.2; }
.anim-svg .a-sband { fill: var(--fig-scale); opacity: 0.35; }
.anim-svg .a-lab { font-family: var(--serif); font-size: 15px; fill: var(--fig-ink); }
.anim-svg .a-y { font-style: italic; fill: var(--fig-scale-line); font-size: 17px; }
.anim-svg .a-s { fill: var(--fig-scale-line); font-weight: 600; }
.anim-svg .a-n { font-style: italic; font-size: 17px; }
.anim-svg .a-tl { font-style: italic; fill: var(--fig-scale-line); }
.anim-svg .a-al { font-style: italic; fill: #b3261e; }
.anim-svg .a-sup { font-size: 10px; }
.anim-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.anim-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.anim-caps { position: relative; min-height: 3.4em; margin-top: 0.7rem; }
.anim-cap { position: absolute; inset: 0 0 auto 0; margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fg); opacity: 0; transition: opacity 0.4s; }
.anim-cap.on { opacity: 1; }
.anim-ctrl { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.anim-ctrl button.anim-play, .anim-ctrl button.anim-replay { font-family: var(--serif); font-size: 0.85rem; width: 2rem; height: 1.8rem; border: 1px solid var(--rule); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.anim-dots { display: inline-flex; gap: 0.35rem; margin-left: 0.3rem; }
.anim-dot { width: 0.55rem; height: 0.55rem; padding: 0; border-radius: 50%; border: 0; background: var(--rule); cursor: pointer; }
.anim-dot.on { background: var(--fig-scale-line); }

@media (max-width: 560px) {
  body { font-size: 1.05rem; }
  h1 { font-size: 1.65rem; }
  .site-nav { gap: 0.9rem; }
  .intro { padding-top: 2.25rem; }
  .post { padding-top: 2rem; }
  figure.fig svg { min-width: 470px; }
  table.tbl { min-width: 520px; }
  .w-codes { grid-template-columns: repeat(8, 1fr); }
}