bits-bytes-nn · Oct 13, 2026 · Oct 13, 2026 · Oct 13, 2026
diff --git a/.gitignore b/.gitignore
@@ -41,3 +41,7 @@ _site
 .idea/
 .run/
 _posts_bak/
+
+# Editor and toolchain leftovers
+node_modules/
+.vscode/
diff --git a/_posts/2025-10-11-gemini--a-family-of-highly-capable-multimodal-models.md b/_posts/2025-10-11-gemini--a-family-of-highly-capable-multimodal-models.md
@@ -1493,7 +1493,7 @@ plt.show()
 
 #### 비디오 이해 및 추론
 
-![축구 페널티킥 장면](/assets/2025-10-11-gemini--a-family-of-highly-capable-multimodal-models/28.png)
+![축구 페널티킥 장면](/assets/2025-10-11-gemini--a-family-of-highly-capable-multimodal-models/28.jpg)
 
 비디오 이해 및 추론 예시에서 모델은 축구 페널티킥 비디오를 분석하고 기술 향상을 위한 권장사항을 제공했습니다. 여기서는 시각화 목적으로만 이미지가 제공되었지만, 실제로는 비디오가 텍스트 프롬프트와 함께 모델에 입력되었습니다.
 

diff --git a/...oning--multimodality--long-context--and-next-generation-agentic-capabilities.md b/...oning--multimodality--long-context--and-next-generation-agentic-capabilities.md
@@ -1009,7 +1009,7 @@ Gemini 1.5 Pro와 Gemini 2.5 Pro에게 이미지의 SVG 표현을 생성하도
 비디오 (46분): Redefining Robotics with Carolina Parada
 프롬프트: 로봇 팔들이 접으려고 하는 티셔츠의 색깔은 무엇이고, 이것이 발생하는 타임코드는 언제입니까?
 
-![회상해야 할 프레임과 타임스탬프](/assets/2025-10-11-gemini-2.5--pushing-the-frontier-with-advanced-reasoning--multimodality--long-context--and-next-generation-agentic-capabilities/16.png)
+![회상해야 할 프레임과 타임스탬프](/assets/2025-10-11-gemini-2.5--pushing-the-frontier-with-advanced-reasoning--multimodality--long-context--and-next-generation-agentic-capabilities/16.jpg)
 
 위 그림은 모델이 회상해야 하는 프레임과 타임스탬프를 보여줍니다. https://www.youtube.com/watch?v=Rgwty6dGsYI의 타임스탬프 27:29에서 가져왔습니다.
 

diff --git a/_sass/_dark.scss b/_sass/_dark.scss
@@ -36,6 +36,15 @@
     color: #e6edf3;
   }
 
+  // Inline code only: inside a highlighted block that background painted a band
+  // behind every line, over the block's own background.
+  .highlight code,
+  .highlighter-rouge pre code,
+  .post-content pre:not(.highlight) code {
+    background: none;
+    color: inherit;
+  }
+
   blockquote {
     color: $fg-muted;
     border-left-color: $border;
@@ -134,14 +143,6 @@
     .post-nav-title { color: $fg; }
   }
 
-  // Code copy button
-  .code-copy {
-    background: rgba($fg, 0.1);
-    color: $fg;
-    border-color: $border;
-    &:hover { background: rgba($fg, 0.2); }
-  }
-
   // Theme toggle button
   .theme-toggle { color: inherit; }
 

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -123,11 +123,15 @@ blockquote {
 // Rouge code blocks (.highlight wraps <pre><code>); theme colors live in _syntax.scss
 .highlight pre,
 .highlighter-rouge .highlight {
-	font-size: 0.9em; // ~14.4px on 16px body — was modular-scale(-1) (13.3px), too small
 	line-height: 1.6;
 	border-radius: $base-border-radius;
 }
 
+// On the <pre> only: set on its wrapper too, the two 0.9em compounded to 0.81em.
+.highlight pre {
+	font-size: 0.9em; // ~14.4px on 16px body — was modular-scale(-1) (13.3px), too small
+}
+
 .highlight pre.highlight {
 	padding: 1em 1.2em;
 }
@@ -210,10 +214,23 @@ blockquote {
 	margin-bottom: $base-spacing;
 }
 
+// A fence in a language Rouge does not know (```cedar) is a bare <pre><code>:
+// give it the same dark panel as a highlighted block.
+.post-content pre:not(.highlight) {
+	background: #272822;
+	color: #f8f8f2;
+	padding: 1em 1.2em;
+	border-radius: $base-border-radius;
+	overflow-x: auto;
+	font-size: 0.9em;
+	line-height: 1.6;
+}
+
 // Reset the inline-`code` chip styling inside fenced blocks, so the gray inline
 // background/padding doesn't paint over Rouge's dark code-block theme.
 .highlight code,
-.highlighter-rouge pre code {
+.highlighter-rouge pre code,
+.post-content pre:not(.highlight) code {
 	display: inline;
 	background: none;
 	padding: 0;
@@ -917,4 +934,37 @@ blockquote {
 		color-scheme: light;
 		background: #fff !important;
 	}
+
+	// Paper has no horizontal scroll: wrap code and shrink wide tables to fit, and
+	// shrink display math (a very wide equation can still clip). The cover's
+	// padding goes with the cover.
+	.post-content pre,
+	.post-content pre code {
+		white-space: pre-wrap !important;
+		overflow-wrap: anywhere;
+		overflow: visible !important;
+	}
+
+	.post-content .table-container table {
+		font-size: 0.75em;
+	}
+
+	// No copy button on paper, so none of the room kept for it.
+	.post-content .highlight pre {
+		padding-top: 1em !important;
+	}
+
+	.post-content .table-container th,
+	.post-content .table-container td {
+		word-break: normal;
+		overflow-wrap: anywhere;
+	}
+
+	.post-content mjx-container[display="true"] {
+		font-size: 80% !important;
+	}
+
+	.post-header-container .scrim.has-cover {
+		padding: 1em !important;
+	}
 }
diff --git a/_sass/_post.scss b/_sass/_post.scss
@@ -296,7 +296,7 @@
     font-size: 0.75rem;
     font-family: $base-font-family;
     color: #c9d1d9;
-    background: rgba(#fff, 0.1);
+    background: mix(#fff, #272822, 10%); // opaque, over the code block's Monokai
     border: 1px solid rgba(#fff, 0.15);
     border-radius: $base-border-radius;
     cursor: pointer;
@@ -306,11 +306,14 @@
 
   .highlight:hover .code-copy,
   .code-copy:focus { opacity: 1; }
-  .code-copy:hover { background: rgba(#fff, 0.2); }
+  .code-copy:hover { background: mix(#fff, #272822, 20%); }
   // Code blocks are dark in both themes, so the ring needs the light blue here;
   // the site's $action-color ring is 2.18:1 on them.
   .code-copy:focus-visible { outline-color: #58a6ff; }
 
+  // It is opaque, so the code starts below it rather than under it.
+  .highlight:has(.code-copy) pre { padding-top: 2.6em; }
+
   // No hover on touch screens, so the button would never appear.
   @media (hover: none) {
     .code-copy { opacity: 1; }
@@ -420,10 +423,46 @@
   padding: 0;
 }
 
-// On a phone GLightbox lays the caption over the figure's foot on a fading
-// gradient; over a white figure the white text fell to 1.5:1.
-body.glightbox-mobile .glightbox-container .gslide-description {
-  background: rgba(0, 0, 0, 0.85);
+// On a phone GLightbox lays the caption over the figure's foot, where it hid
+// the bottom of a heatmap or a diagram's last row. Stack it below instead:
+// the figure takes the room the caption leaves.
+body.glightbox-mobile .glightbox-container {
+  .gslide,
+  .gslide-inner-content {
+    height: 100%;
+  }
+
+  .ginner-container {
+    height: 100%;
+    padding-top: 56px; // clear of the close button
+    box-sizing: border-box;
+    display: grid;
+    // Figure and caption centre together, the figure shrinking first.
+    grid-template-rows: minmax(0, max-content) auto;
+    align-content: center;
+  }
+
+  .gslide-media {
+    min-height: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .gslide-image img {
+    max-height: 100%;
+    max-width: 100%;
+    width: auto;
+    height: auto;
+  }
+
+  .gslide-description {
+    position: relative;
+    bottom: auto;
+    background: #000;
+    padding-bottom: 19px; // in place of GLightbox's mobile 50px; matches its top
+  }
 }
 
 // Opaque, but a disabled arrow (first or last slide) keeps GLightbox's dimming.

diff --git a/assets/2025-10-11-gemini--a-family-of-highly-capable-multimodal-models/28.jpg b/assets/2025-10-11-gemini--a-family-of-highly-capable-multimodal-models/28.jpg
diff --git a/assets/2025-10-11-gemini--a-family-of-highly-capable-multimodal-models/28.png b/assets/2025-10-11-gemini--a-family-of-highly-capable-multimodal-models/28.png
diff --git a/...g--multimodality--long-context--and-next-generation-agentic-capabilities/16.jpg b/...g--multimodality--long-context--and-next-generation-agentic-capabilities/16.jpg
diff --git a/...g--multimodality--long-context--and-next-generation-agentic-capabilities/16.png b/...g--multimodality--long-context--and-next-generation-agentic-capabilities/16.png
diff --git a/docs/tech-doc.md b/docs/tech-doc.md
@@ -160,7 +160,7 @@ _site/paper-reviews/language-models/2025/01/23/<slug>.html
 이 종류의 글도 쓴다"는 선언이다.
 
 `categories.html`(`/categories/`)과 `tags.html`(`/tags/`)은 *모든* 카테고리/태그를 가로지르는
-전체 색인 페이지다. 메인 내비에는 없고, 각 포스트 하단의 메타데이터에서 링크된다.
+전체 색인 페이지다. 메인 내비에는 없고, 각 포스트 제목 아래의 메타데이터에서 링크된다.
 
 > **함정 — 카테고리 "누수".** Liquid의 `site.categories`는 그 이름이 달린 글을 **유형
 > 구분 없이** 전부 모은다. 그래서 *모든* 카테고리를 순회하는 페이지를 만들면, 다른 유형의

diff --git a/script/validate-site.sh b/script/validate-site.sh
@@ -159,6 +159,10 @@ else
   pass "$page_count rendered pages found"
 fi
 
+# Characters, not bytes, whatever the caller's locale (C.UTF-8 is on macOS and
+# the Ubuntu runners alike).
+chars() { local LC_ALL=C.UTF-8; printf %s "${#1}"; }
+
 extract_meta() { # file, meta-name
   grep -m1 -oE "<meta name=\"$2\" content=\"[^\"]*\"" "$1" 2>/dev/null |
     sed -E "s/.*content=\"//; s/\"$//"
@@ -178,8 +182,8 @@ while IFS= read -r f; do
   h1=$(grep -oE '<h1[^>]*>' "$f" | grep -c .)
   [ "$h1" = "1" ] || bad_h1="$bad_h1$h1  $f"$'\n'
   t=$(grep -m1 -oE '<title>[^<]*</title>' "$f" | sed -E 's|</?title>||g')
-  if [ -n "$d" ] && [ "${#d}" -le "${#t}" ]; then
-    short_desc="$short_desc${#d} vs ${#t}  $f"$'\n'"          title: $t"$'\n'"          desc : $d"$'\n'
+  if [ -n "$d" ] && [ "$(chars "$d")" -le "$(chars "$t")" ]; then
+    short_desc="$short_desc$(chars "$d") vs $(chars "$t")  $f"$'\n'"          title: $t"$'\n'"          desc : $d"$'\n'
   fi
   descs="$descs$d"$'\n'
   titles="$titles<title>$t</title>"$'\n'

diff --git a/test/test_lint_posts.rb b/test/test_lint_posts.rb
@@ -39,6 +39,13 @@ def test_rejects_author_and_a_person_list_as_paper_author
     assert_finding(/paper_author must name/, lint(front: FRONT.sub('"Mistral AI"', '"Rasmussen et al."')))
   end
 
+  def test_an_insights_post_takes_the_type_cover
+    # Language-Models has its own image; the type's still wins.
+    front = FRONT.sub('"Paper Reviews", "Language-Models"', '"Insights", "Language-Models"').sub("paper_author: \"Mistral AI\"\n", "")
+    assert_equal [], lint(front: front.sub("language-models.jpg", "insights.jpg"))
+    assert_finding(/cover for Insights/, lint(front: front))
+  end
+
   def test_a_topic_without_an_image_takes_any_existing_one
     front = FRONT.sub('"Paper Reviews", "Language-Models"', '"Tech Guides", "Agentic-AI"').sub("paper_author: \"Mistral AI\"\n", "")
     assert_equal [], lint(front: front.sub("language-models.jpg", "insights.jpg"))
@@ -138,7 +145,8 @@ def test_a_non_html_tag_renders_as_nothing
     assert_finding(/<img> is read as HTML/, lint("이미지 자리에 <img> 토큰이 들어갑니다.\n"))
     assert_equal [], lint("<svg width=\"10\"><rect width=\"1\"/><path d=\"M0\"/></svg>\n")
     assert_equal [], lint("<center><svg width=\"1\"></svg></center> <script src=\"https://gist.github.com/x.js\"></script>\n")
-    assert_equal [], lint("For $$i<j \\le n$$ and x<y z we sum.\n")
+    # Math is stripped first: <y> inside $$...$$ is TeX, not a tag.
+    assert_equal [], lint("For $$x<y>z$$ and x<y z we sum.\n")
     assert_equal [], lint("답변은 `<think>` 또는 \\<think\\> 태그, <br> 줄바꿈, <https://a.b> 링크.\n")
   end
 
@@ -172,6 +180,7 @@ def test_tag_edge_cases
     # YAML reads a bare 2024 as an Integer; it is checked as text, not a crash.
     assert_equal [], lint(front: FRONT.sub('"Sliding-Window-Attention"', '2024'))
     assert_equal [], lint(front: FRONT.sub('"Sliding-Window-Attention"', '"Opt-In"'))
+    assert_equal [], lint(front: FRONT.sub('"Sliding-Window-Attention"', '"Leiden-Algorithm-for-Text"'))
   end
 
   # YAML 1.1 reads a bare `on` as true, which would drop it from the list.