v4: the six styles are reworked, each around one idea of its own, and the tab row stops painting the page — a pass over every theme, then the faults it showed in what they share. Brutalist draws every box in ink with a solid offset shadow and sets the palette's colors as flat blocks (a teal tag, an apricot quote, an inked label); its dark scheme keeps that ink darker than the page, on Twilight Indigo, where eggshell lines glared across every frame. GeoCities goes to the desktop of its day: the header is the taskbar, the site's name its Start button, the controls grey bevels, and a marquee crawls under the header (Marquee.tsx, drawn in that style alone), with Comic Neue where the system has no Comic Sans. Melange leaves its browns and Fraunces for a sorbet blend in Bricolage Grotesque, run along the header, through the site's name, where it drifts, and between a journal's blocks; its two schemes are one print and its negative, trading ink and paper while the pink and the plum written on it stay, and they share one fine grain where the light one had a coarse tile that greyed the page. Kanagawa opens the comments and the related dumps on a status line and reads on Lotus's brightest paper; its page is flat. Times draws its heavy rules in a mid grey at night, where ink is near white, and sets a journal cell with no picture as text. In what the styles share: a row of tabs (TabBar) hid the tabs scrolled under its scope switcher, and faded its ends, by painting the page's color over them, which showed as a patch on any page that is a gradient or a picture. The switcher now sits before the row that scrolls, which clips the tabs at its edge, and the fades are a mask (--tab-fade-start and --tab-fade-end); useRoomBeside measures the row through that one more level. A page's title keeps a word whole unless it alone is wider than the line: Firefox sizes a title set with negative letter-spacing a hair narrower than it lays it out, which dropped its last letter to a second line in any style that tightened it, so the rule is the base's and the two styles' copies go. A card holding one paragraph, such as the instances a new account hasn't signed in to on /settings, is spaced by its padding and not by the paragraph's margins as well. The site's name answers the pointer as a card's title does in each style, where two of them left it still. The emails follow the styles' tokens, Melange's blend among them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/themes/kanagawa.css

@@ -8,6 +8,8 @@
                  accent) — the yellow paper is the point, keep it warm.
    Syntax hues carry the character: fujiGray italic "comments" for dates,
    springGreen "strings" for quotes, oniViolet "keywords" for the brand.
+   A section opens on a status line, as a buffer ends on one. The page is
+   flat, the editor's own ground: the cards and the type carry the scheme.
    ══════════════════════════════════════════════════════════════════════ */
 
 /* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
@@ -32,10 +34,13 @@
 
   /* Surfaces — sunken < bg < surface < raised.
      Wave:  sumiInk0 · sumiInk3 · sumiInk4 · sumiInk5.
-     Lotus: lotusWhite1 · lotusWhite3 · lotusWhite2 · lotusWhite3 — paper
-            darkens where the editor draws gutters and floats. */
-  --color-bg: light-dark(#f2ecbc, #1f1f28);
-  --color-surface: light-dark(#e7dfb2, #2a2a37);
+     Lotus: lotusWhite1 · lotusWhite4 · lotusWhite3 · lotusWhite3. What is
+            read sits on lotusWhite3, the editor's own paper and the
+            brightest the scheme has, and the page around the cards is the
+            shade darker the editor gives its window chrome: the ink loses a
+            fifth of its contrast on the darker sheet. */
+  --color-bg: light-dark(#e7dfb2, #1f1f28);
+  --color-surface: light-dark(#f2ecbc, #2a2a37);
   --color-surface-raised: light-dark(#f2ecbc, #363646);
   --color-surface-sunken: light-dark(#dcd5ac, #16161d);
 
@@ -91,15 +96,17 @@
   );
 
   /* Theme-only hues, straight from the syntax groups:
-     comment  fujiGray / lotusGray3     · keyword oniViolet / lotusViolet4
+     comment  fujiGray / lotusGray2     · keyword oniViolet / lotusViolet4
      string   springGreen / lotusGreen  · number  sakuraPink / lotusPink
-     chrome   sumiInk1 / lotusWhite1 (sidebars, tabline)
-     visual   waveBlue1 / lotusViolet3 (selection) */
-  --kngw-comment: light-dark(#8a8980, #727169);
+     chrome   sumiInk1 / lotusWhite0 (sidebars, tabline, status line)
+     visual   waveBlue1 / lotusViolet3 (selection)
+     Lotus's own comment grey, lotusGray3, is too faint for a date set this
+     small, so the light scheme takes the next grey down. */
+  --kngw-comment: light-dark(#716e61, #727169);
   --kngw-keyword: light-dark(#624c83, #957fb8);
   --kngw-string: light-dark(#6f894e, #98bb6c);
   --kngw-number: light-dark(#b35b79, #d27e99);
-  --kngw-chrome: light-dark(#e5ddb0, #181820);
+  --kngw-chrome: light-dark(#d5cea3, #181820);
   --kngw-selection: light-dark(#c9cbd1, #223249);
   /* Over a photo the ground is the black scrim in either scheme, so the
      accent there stays Wave's crystalBlue — Lotus's lotusBlue4 is picked to
@@ -133,12 +140,17 @@
   background: var(--kngw-selection);
 }
 
-/* Brand as a keyword — oniViolet, italic like kanagawa's keywordStyle */
+/* Brand as a keyword — oniViolet, italic like kanagawa's keywordStyle.
+   Pointed at, it takes the accent, as a card's title does. */
 [data-style="kanagawa"] .app-header-brand {
   color: var(--kngw-keyword);
   font-style: italic;
 }
 
+[data-style="kanagawa"] .app-header-brand:hover {
+  color: var(--color-accent);
+}
+
 /* ── Header — the tabline: a shade off the page, split by a plain rule ── */
 [data-style="kanagawa"] .app-header {
   border-bottom: 1px solid var(--color-border);
@@ -190,8 +202,8 @@
   color: var(--kngw-string);
 }
 
-/* Sub-blocks part on a comment divider — the dashed rule and the ellipsis a
-   source file uses to mark a section, set in the mono face the theme reads in. */
+/* Sub-blocks part on a comment divider: the dashed rule a source file marks
+   a section with, and its three dots. */
 [data-style="kanagawa"] .journal-break {
   --journal-break-space: 1.9rem;
   --journal-break-rule: 1px dashed var(--color-border);
@@ -202,3 +214,33 @@
 [data-style="kanagawa"] .vote-btn:not(.vote-btn--active) {
   color: var(--kngw-number);
 }
+
+/* ── Status lines — the comments and the related dumps open on one ── */
+/* The bar is the section's own background, a strip of the chrome as tall as
+   the label, and the label is the mode block at its left end: the accent,
+   bold, as an editor shows NORMAL. */
+[data-style="kanagawa"] .comment-section,
+[data-style="kanagawa"] .related-section {
+  --kngw-status-height: 1.7rem;
+  padding-top: 0;
+  border-top: none;
+  background: linear-gradient(var(--kngw-chrome), var(--kngw-chrome)) top /
+    100% var(--kngw-status-height) no-repeat;
+}
+
+[data-style="kanagawa"] .comment-section-title,
+[data-style="kanagawa"] .related-section .related-section-title {
+  display: inline-block;
+  height: var(--kngw-status-height);
+  margin-bottom: 1.1rem;
+  padding: 0 0.8rem;
+  background: var(--color-accent);
+  color: var(--color-on-accent);
+  line-height: var(--kngw-status-height);
+  letter-spacing: 0.06em;
+}
+
+/* A dump's note is read at length: full ink, where the base dims it. */
+[data-style="kanagawa"] .dump-comment {
+  opacity: 1;
+}