*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* TWO font handles, and which one is the DEFAULT matters more than it looks. --font-sans
is the system chrome face: header, footer, rail, dates, reading times, everything that
is not the reader's own words. --font-reading is the reader's words, and it is opted
INTO by .prose and .reading-font. This said --font-reading, so the whole site rendered
in the article face and the owner's chrome font was never seen anywhere. */
body{
margin:0;background:var(--c-bg);color:var(--c-text);
font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
letter-spacing:var(--ls-body);font-optical-sizing:auto;
}
/* Block margins to zero, and let the components state their own spacing.
The frozen tree got this from Tailwind's preflight and its layout is built on top of it:
the listing card sets .mt-2 / .mt-3 and expects nothing from the browser. Without the
reset the card's first paragraph carried a 1em default margin, it collapsed out through
the card, and the whole feed sat 14px lower than the rail beside it - which is the
three-columns-not-level the owner spotted. Rhythm INSIDE the body copy is restored by
.prose > * + * in prose.css.ts, exactly as the frozen tree restores it. */
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ol,ul,dl,dd,pre{margin:0}
/* The SECOND thing the frozen tree got free from Tailwind's preflight, and the second one
to go missing. A form control does not inherit its font: left alone, every button on the
site paints in the browser's UI face at the browser's size, not in the owner's typeface
at a --fs- token. Measured before this rule existed: "Sao chép" on every code block and
"Lên đầu trang" on every article rendered in Arial at 12px/normal, and the theme and menu
buttons at 13.33px/normal - four controls on a site whose own rule is one typeface and no
hardcoded sizes. The shorthand is deliberate: font:inherit carries line-height too, which
font-family alone would leave at the UA's "normal". */
button,input,select,textarea,optgroup{font:inherit;color:inherit;letter-spacing:inherit}
img,video,iframe{max-width:100%;height:auto}
a{color:var(--c-link);text-decoration:underline;text-underline-offset:.15em}
a:hover{color:var(--c-heading)}
hr{border:0;border-top:1px solid var(--c-rule);margin:2.5rem 0}
/* The column width is --shell-w, not a constant: the layout sets it from the owner's
contentWidth and a two-rail listing overrides it with something narrower. It read
--content-width, which nothing ever set, so every page has been 42rem wide regardless
of the setting.
The 2rem gutter is the same at EVERY width, which the frozen tree's markup does not
admit: it says "px-8 sm:px-5", but no .sm\:px-5 rule was ever compiled into its
stylesheet, so 2rem is what actually shipped. Measured off the rendered page, not read
off the class list — the two disagreed by 24px of column, which is one word per line. */
.wrap{max-width:var(--shell-w,42rem);margin:0 auto;padding:0 2rem;
display:flex;min-height:100vh;flex-direction:column}
/* The rail is absolutely placed against THIS box, not the page, so it never displaces the
reading column and the column stays centred exactly as it does with no rail at all. It
wraps the content and not the header, which is what puts the rail's first line level
with the article's first line. */
.with-rail{position:relative;display:flex;flex:1;flex-direction:column}
main{flex:1;padding:3rem 0 1rem}
header.site{padding:1.75rem 0}
header.site .title{font-family:var(--font-sans);font-weight:600;color:var(--c-heading);
text-decoration:none;font-size:var(--fs-h4);line-height:var(--lh-h4);
letter-spacing:var(--ls-h4)}
/* width+height on the tag reserve the space, so the header does not jump when the logo
arrives; the CSS width keeps it responsive and height:auto keeps the ratio. */
header.site .logo{display:block;height:auto}
/* When the owner has uploaded a dark twin both are in the markup and exactly one shows.
The :has() test keeps the light one visible on a site with no dark logo, where
.logo-dark is simply absent. */
header.site .logo-dark{display:none}
html.dark header.site .title:has(.logo-dark) .logo{display:none}
html.dark header.site .logo-dark{display:block}
header.site .tagline{color:var(--c-meta);font-size:var(--fs-small);
line-height:var(--lh-small);letter-spacing:var(--ls-small);margin:.75rem 0 0}
/* The reading face for .prose is in prose.css.ts, with the rest of the .prose rules, so the
editor gets it too. There is deliberately no "article h1" rule: an article IS also the
listing card, and a bare element selector here silently restyled every card title. Sizes
come from the type-role classes. */
article > header h1{color:var(--c-heading);margin:0}
article > header .t-small{margin:0}
/* Standfirst: the excerpt, so a long read opens on a sentence rather than a wall.
It is the AUTHOR'S words — the same string a list card prints — so it is set in the
reading face. It was not: with no family of its own it fell to --font-sans, so the same
excerpt rendered in Literata on the home page and in JetBrains Mono under the title of
the post it belongs to. A book serif headline with a terminal subtitle under it, and the
one seam on the page where the two faces touch. Same class as the comment body, which
lost its reading face in the port for the same reason. */
.deck{margin:1rem 0 0;color:var(--c-meta);font-family:var(--font-reading);
font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}
#post-body{margin-top:2.5rem}
/* Tags and categories over a rule: the rule is where the article ends. Without it the
taxonomy reads as one more paragraph. */
.post-taxo p{margin:0 0 .25rem}
/* The end-of-article anchors the contents list jumps to. Their own empty elements, because
the taxonomy they used to sit on is hidden in the wide layout and an anchor with no box
cannot be scrolled to. Zero height, so they cost the flow nothing at either width. */
.anchor{display:block;height:0;scroll-margin-top:6rem}
/* The right gutter of an article: the same facts as the meta line and the taxonomy, one per
line, placed by singleRailCss above the rail breakpoint. Absent by default — below that
breakpoint there is no gutter, and the in-flow originals are what the reader gets. */
.post-info{display:none}
.post-info p{margin:0}
.post-info p + p{margin-top:.35rem}
/* One even rhythm through the facts — the tags and categories used to be set apart and the
owner asked for them level with the rest. The ACTION is the only thing set apart, because
it is the one row that is not a fact: it does something. */
.post-info .info-action{margin-top:1.25rem;color:var(--c-heading);font-weight:500}
/* The VALUES are a step darker than the words around them, the same ink the contents list
uses for the row you are on. The panel is the only place a desktop reader sees the date
and the length, so it carries the whole hierarchy on its own. */
.post-info time,.post-info .num{color:var(--c-heading)}
/* End-of-article furniture, and it needs its own scale rather than the page's. The link had
NO size rule at all, so a related title inherited the BODY size: the quietest thing on the
page (a list of "you might also read") was set as large as the writing, and in the chrome
face, which on a monospace setting is visibly wider again. h5 is the title role that sits
below body. The whole block is now ONE size: at h5 the titles still read as headings under
a chrome font that is monospace on this site, and the owner asked for them smaller again.
So the label, the titles and the dates are all --fs-small and nothing here competes with
the article; weight and colour do the separating, which is how a book sets its back
matter. */
.related{font-size:var(--fs-small);line-height:var(--lh-small);
letter-spacing:var(--ls-small)}
/* The size is stated even though the block already sets it: an h2 carries a UA default of
1.5em, so leaving it to inherit made the quiet label the largest thing in the block. */
.related h2{font-size:var(--fs-small);line-height:var(--lh-small);
letter-spacing:var(--ls-small);font-weight:600;color:var(--c-meta);margin:0 0 1.25rem}
.related ul{list-style:none;padding:0;margin:0}
.related li + li{margin-top:1rem}
.related a{font-weight:600;color:var(--c-heading)}
.related p{margin:.125rem 0 0}
article + .subscribe-card,article + #comments{margin-top:2.5rem}
/* The body's rhythm is ONE rule: every sibling gets the same lead, and the headings then
buy themselves a little more. Margins were bottom-side and fixed in rem here, which does
not scale with the reader's type size and left headings floating between paragraphs. */
/* The reading face belongs HERE, not in the public sheet, because the editor is a .prose
surface too and what you type has to be set in the face it will be published in. It lived
in public.css.ts, so the writing surface fell back to the chrome font and a post drafted
in JetBrains Mono was published in Literata. */
.prose{font-family:var(--font-reading);
font-size:var(--fs-body);line-height:var(--lh-body);
letter-spacing:var(--ls-body);color:var(--c-text)}
.prose > * + *{margin-top:1.4em}
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5{color:var(--c-heading);font-weight:600;
scroll-margin-top:2rem}
.prose h1{font-size:var(--fs-h1);line-height:var(--lh-h1);
letter-spacing:var(--ls-h1);margin-top:1.9em}
.prose h2{font-size:var(--fs-h2);line-height:var(--lh-h2);
letter-spacing:var(--ls-h2);margin-top:1.85em}
.prose h3{font-size:var(--fs-h3);line-height:var(--lh-h3);
letter-spacing:var(--ls-h3);margin-top:1.8em}
.prose h4{font-size:var(--fs-h4);line-height:var(--lh-h4);
letter-spacing:var(--ls-h4);margin-top:1.75em}
.prose h5{font-size:var(--fs-h5);line-height:var(--lh-h5);
letter-spacing:var(--ls-h5);margin-top:1.7em}
/* A heading belongs to what comes AFTER it. Left to the shared 1.4em lead, the space below
a heading is a fixed 1.4 x the BODY size while the space above is a multiple of the
HEADING's own size — so the smaller the heading, the closer the two get, and at h5 they
inverted: 22px above, 25px below. Measured on the specimen page, all four levels:
h2 44 above / 22 below h3 32 / 25 h4 28 / 25 h5 22 / 25
The space below is therefore stated here, in the FOLLOWING element's em (it is that
paragraph's lead, not the heading's), and graded so every level keeps a clear
above-beats-below ratio while the absolute space still shrinks with the level. */
.prose > :is(h1,h2) + *{margin-top:.75em}
.prose > :is(h3,h4,h5) + *{margin-top:.6em}
/* Bold is EMPHASIS in the body colour. A book serif's 700 is blacker than the 600 of the
headings, so a preset can dial it back through --reading-bold. */
.prose strong,.prose b{font-weight:var(--reading-bold, 700)}
/* A body link carries a permanent faint rule that warms to the accent on hover, which is
the opposite signature to the chrome links (.link-accent) and deliberately so. */
.prose a{color:var(--c-link);text-decoration:underline;text-underline-offset:.18em;
text-decoration-thickness:1px;text-decoration-color:var(--c-rule)}
.prose a:hover{text-decoration-color:var(--c-accent)}
.prose ul{list-style:disc;padding-left:1.4em}
.prose ol{list-style:decimal;padding-left:1.4em}
.prose li{margin:calc(var(--sp) * .25) 0}
.prose blockquote{border-left:2px solid var(--c-rule);margin-left:0;
padding-left:var(--sp);color:var(--c-meta)}
/* Code is the ONE role that is not the reading face, and it is one face for both forms.
It used to be two: inline code inherited the reading font while a fenced block asked for
var(--font-mono), which nothing ever defined — so the same code role rendered in a book
serif on one line and the browser's ui-monospace three lines later. --font-mono is now a
real token (JetBrains Mono, self-hosted, declared in font-faces.ts). The face costs
nothing on a post with no code: unicode-range means the browser fetches a file only when
a glyph actually needs it. */
.prose code{font-family:var(--font-mono);font-size:var(--fs-code);
line-height:var(--lh-code);letter-spacing:var(--ls-code)}
.prose :not(pre) > code{background:var(--c-rule);padding:.15em .38em}
.prose pre{padding:var(--sp);border-radius:.5rem;overflow-x:auto;font-size:var(--fs-code);
line-height:var(--lh-code);letter-spacing:var(--ls-code)}
.prose pre code{font-size:inherit;line-height:inherit;letter-spacing:inherit}
/* A SECTION BREAK, not a divider. A printed book never rules a line across the text
block to change subject: it leaves white space, and marks it with something small and
centred so the reader knows the gap is deliberate rather than a page ending. The
full-width rule stays for the STRUCTURAL separations, which are a different job: the
footnote rule, the top of the comment thread, the pager. Those are edges of the
document; this is a pause inside it.
Width in em, so it grows with the reader's type and with book mode's 1.15. */
.prose hr:not(.fn-rule){width:6em;margin:2.6em auto;border-top:1px solid var(--c-rule)}
.prose table{border-collapse:collapse;width:100%}
.prose th,.prose td{border:1px solid var(--c-rule);
padding:calc(var(--sp) * .4) calc(var(--sp) * .6);text-align:left}
/* BOOK TYPOGRAPHY (features.bookText). A printed book leads a paragraph with nothing but
an indent; on screen that reads as a wall, so a small lead stays. A paragraph that OPENS
something is never indented — the indent says "this continues", and after a heading
there is nothing to continue from. */
.book-text .prose p{margin-top:.65em;text-indent:1.6em}
.book-text .prose > p:first-child{text-indent:0}
.book-text .prose :is(blockquote,figure,pre,ul,ol,hr,table,.gallery,.video-embed) + p{
text-indent:0;margin-top:1.4em}
/* A heading keeps the tighter lead the rhythm rules give it: restating 1.4em here would
undo, in book mode only, the one thing that binds a heading to its own section. */
.book-text .prose :is(h1,h2,h3,h4,h5) + p{text-indent:0}
.book-text .prose li p,.book-text .prose blockquote p{text-indent:0}
@media (min-width:600px){
.book-text .prose p,.book-text .prose li{text-align:justify;hyphens:auto}
}
/* An archive heading is chrome, not the reader's words: it stays in --font-sans and it is
BOLD, where a post title is 600. Both come from the frozen tree's own markup. */
.listing-head{margin:0 0 2rem}
.listing-head h1{font-size:var(--fs-h1);line-height:var(--lh-h1);
letter-spacing:var(--ls-h1);color:var(--c-heading);margin:0;font-weight:700}
.lower{text-transform:lowercase}
/* Type ROLES, ported from the frozen tree. A card composes these rather than declaring
its own sizes, which is why the listing and the article agree without anyone keeping
two numbers in step. Every size is the owner's --fs-* setting times --type-scale, so
nothing here is a literal. */
.fs-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
.fs-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.fs-h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.t-small{font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.text-meta{color:var(--c-meta)}
.text-text{color:var(--c-text)}
.reading-font{font-family:var(--font-reading)}
.font-semibold{font-weight:600}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
/* ONE hover signature for every link outside the body copy: an accent underline. */
.link-accent{color:var(--c-heading);text-decoration:none}
.link-accent:hover{text-decoration:underline;text-decoration-color:var(--c-accent);
text-decoration-thickness:1px;text-underline-offset:4px}
/* Cards are separated by SPACE, not by a rule. The border-bottom here was mine, not the
frozen tree's, and it turned a quiet feed into a table. The gap has to be wide enough to
read as a break rather than a paragraph space, which is what 4rem buys. */
.post-list{display:flex;flex-direction:column;gap:4rem}
.post-list > article > p:first-of-type{margin:0}
/* The timeline groups its cards by year, so the gap moves onto the cards themselves: the
year marker is zero-height and sticky, and a flex gap would still reserve a row for it. */
.post-list.tl-feed{display:block}
.tl-feed .tl-yr article{margin-top:4rem}
.tl-feed > .tl-yr:first-child > article:first-of-type{margin-top:0}
[data-list=grid] .tl-yr{display:contents}
[data-list=grid] .tl-feed article{margin-top:0} /* the grid supplies its own gap */
/* A node ON the spine, not under it. The spine is .post-list::after, a pseudo-element of
the LIST, so it paints after the list's children and drew straight over every month
dot; and unlike the year tag the mark carried no background, so the hairline ran
through the label too. Both fixed the way the year already solved it: a --c-bg mask
that breaks the line, and a stacking order above it. */
.tl-mark{align-items:center;gap:.5rem;white-space:nowrap;color:var(--c-meta);
background:var(--c-bg);padding:.1rem 3rem .1rem 0;z-index:1}
/* The sticky year is a --c-bg tag, so months sliding up to the top pass UNDER it and
disappear instead of overlapping; the right padding widens the mask to cover the
longest month label. */
.tl-year-tag{align-items:center;gap:.5rem;white-space:nowrap;color:var(--c-heading);
font-weight:600;background:var(--c-bg);padding:.1rem 3rem .1rem 0;
font-size:var(--fs-h3);line-height:var(--lh-h3);
letter-spacing:var(--ls-h3)}
.tl-year-tag .tl-dot{background:var(--c-accent)}
.tl-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--c-meta)}
.empty{color:var(--c-meta)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:1rem;
border-top:1px solid var(--c-rule);padding-top:1rem;margin-top:1rem;
font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}
.pager-count{color:var(--c-meta)}
form.search{display:flex;gap:.5rem;margin:0 0 2rem}
form.search input{flex:1;padding:.5rem .75rem;border:1px solid var(--c-rule);border-radius:.35rem;
background:var(--c-bg);color:var(--c-text);font:inherit}
form.search button{padding:.5rem 1rem;border:1px solid var(--c-rule);border-radius:.35rem;
background:var(--c-bg);color:var(--c-heading);font:inherit;cursor:pointer}
/* The series box: a bordered card at the TOP of the post, as the frozen tree had it. The
port turned it into a plain rule at the foot of the article, which is the wrong end — the
point of it is knowing you are in part 3 of 6 BEFORE reading, not after. */
aside.series{border:1px solid var(--c-rule);border-radius:.5rem;padding:1.25rem 1.5rem;
margin:2rem 0 0;font-size:var(--fs-small);line-height:var(--lh-small);
letter-spacing:var(--ls-small)}
aside.series .series-head{margin:0;color:var(--c-meta)}
aside.series ol{margin:1rem 0 0;padding-left:1.25rem}
aside.series li{margin-top:.5rem}
aside.series li a{color:var(--c-meta);text-decoration:none}
aside.series li a:hover{color:var(--c-heading)}
/* The part you are reading is not a link, and it is the one thing in the card set in the
heading colour: the card answers "where am I" before it answers "what else is there". */
aside.series li[aria-current]{color:var(--c-heading);font-weight:600}
p.tags{margin-top:1.5rem;font-size:var(--fs-small);line-height:var(--lh-small);
letter-spacing:var(--ls-small);color:var(--c-meta)}
figure{margin:calc(var(--sp) * 2) 0}
figure img{display:block;margin:0 auto;border-radius:.25rem}
figcaption{color:var(--c-meta);font-size:var(--fs-caption);line-height:var(--lh-caption);
letter-spacing:var(--ls-caption);text-align:center;margin-top:calc(var(--sp) * .5)}
.img-left img{margin-left:0}
.img-right img{margin-right:0}
.img-wide{margin-left:calc(-1 * clamp(0px,4vw,4rem));margin-right:calc(-1 * clamp(0px,4vw,4rem))}
.gallery{display:grid;gap:calc(var(--sp) * .5);margin:calc(var(--sp) * 2) 0}
.gallery figure{margin:0}
.gallery-cols-2{grid-template-columns:repeat(2,1fr)}
.gallery-cols-3{grid-template-columns:repeat(3,1fr)}
.gallery-cols-4{grid-template-columns:repeat(4,1fr)}
.video-embed,.video-file{margin:calc(var(--sp) * 2) 0}
.video-embed{position:relative;padding-top:56.25%}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-file video{width:100%;display:block}
.audio-embed iframe{width:100%;height:9.25rem;border:0}
.callout{border-left:2px solid var(--c-accent);
padding:calc(var(--sp) * .75) 0 calc(var(--sp) * .75) var(--sp);
margin:calc(var(--sp) * 1.75) 0}
.callout-label{font-weight:600;color:var(--c-heading);margin:0 0 calc(var(--sp) * .35)}
.callout p:last-child{margin-bottom:0}
/* applyFootnotes already emits an ; a border-top here as well
drew TWO lines above the notes. Caught by opening the page, not by reading it. */
.prose .fn-rule{margin-top:2.5em}
.footnotes{font-size:var(--fs-small);line-height:var(--lh-small);
letter-spacing:var(--ls-small);color:var(--c-meta)}
.footnotes ol{padding-left:calc(var(--sp) * 1.25)}
sup.fnref a{text-decoration:none}
footer.site{padding:3rem 0;text-align:center;color:var(--c-meta);
font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small)}
.footer-text{margin:0}
footer.site a{text-decoration:underline;text-underline-offset:2px}
footer.site a:hover{color:var(--c-text)}
/* Shiki emits a light colour inline and a --shiki-dark var; the dark palette swaps them. */
.dark .shiki,.dark .shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important}
/* THE RAIL: the listing sidebar and the post's table of contents, which are one piece of
furniture wearing two sets of contents. All server-rendered, so these rules apply with
or without JavaScript; only the aria-current highlight and the mobile drawer come from
the bundle.
BELOW the rail breakpoint it sits above the article, in normal flow, exactly as written
here. ABOVE it, the rules generated by singleRailCss move it into the left gutter. The
frozen tree also had a slide-out drawer and a toggle island for narrow screens; a list
that simply sits above the article needs neither, so that island is not ported. */
:root{--rail-w:250px;--rail-gap:40px;
/* Gap between a rail row's text and the accent marker beside it. */
--rail-pad:14px;
/* Space between the header and the first line of content. The rail's top matches it, so
the rail's first line is level with the article's first line. */
--rail-top:3rem}
/* Mobile FIRST: the rail is a slide-out drawer opened from the header menu button. The
injected geometry promotes it into the gutter above the breakpoint. ONE piece of DOM
serves both, which is why there is no second copy of the sidebar to keep in step. */
.rail{position:fixed;top:0;bottom:0;left:0;z-index:40;width:min(300px,84vw);
overflow-y:auto;overscroll-behavior:contain;padding:4.5rem 1.25rem 2rem;
background:var(--c-bg);border-right:1px solid var(--c-rule);
transform:translateX(-100%);transition:transform .25s ease}
html[data-rail=open] .rail{transform:none}
/* Two-rail listings only: on mobile there is no gutter, so the LEFT rail is hidden and its
blocks appear in the right rail's drawer through .drawer-only. */
.rail-left{display:none}
/* Tap anywhere else to close. No dim: the drawer already owns a solid surface. */
.rail-scrim{position:fixed;inset:0;z-index:39}
.rail-inner{position:sticky;top:2.5rem}
.rail-inner > * + *,.drawer-only > * + *{margin-top:1.75rem}
.rail h2{margin:0 0 .75rem;padding-left:var(--rail-pad);font-weight:600;color:var(--c-heading);
font-size:var(--fs-small);line-height:var(--lh-small);
letter-spacing:var(--ls-small)}
.rail ul{list-style:none;margin:0;padding:0}
.rail li{margin-top:.5rem}
.rail li:first-child{margin-top:0}
.rail-row{position:relative;display:flex;justify-content:space-between;gap:.875rem;
padding-left:var(--rail-pad);color:var(--c-meta)}
.rail-row:hover,.rail-tags a:hover{color:var(--c-heading)}
/* The one accent mark: a hairline beside the row you are already reading. In the drawer it
sits left of the text; in the gutter the rail flips and it faces the divider. */
.rail-row[aria-current]::before{content:"";position:absolute;left:0;top:3px;bottom:3px;
width:2px;background:var(--c-accent)}
/* Counts sit in their own right-aligned column so the labels stay aligned however many
digits a count carries. The column is exactly as wide as the widest count on the page
(--count-w, in ch, exact because the digits are tabular); a fixed em width would leave
dead space on every single-digit row. */
.rail-count{min-width:var(--count-w,1ch);text-align:right;flex-shrink:0;
font-variant-numeric:tabular-nums}
.rail-tags{display:flex;flex-wrap:wrap;column-gap:.75rem;row-gap:.25rem;padding-left:var(--rail-pad)}
.rail-tags a{color:var(--c-meta)}
/* Tags are many and short: a wrapped run of plain words, no chips, no boxes. */
.rail-tags.lower a{text-transform:lowercase}
/* The brackets are CSS, not markup, so the IDE chrome can swap them for square ones and
switching it off puts them back. They used to be typed into the sidebar renderer, which
is why the taxonomy read "(7)" while the list beside it read "[7]". */
.term-count{margin-left:.25rem;opacity:.6;font-variant-numeric:tabular-nums}
.term-count::before{content:"("}
.term-count::after{content:")"}
.rail-row.is-active,.rail-tags a.is-active{font-weight:500;color:var(--c-heading)}
.rail-tags a.is-active{text-decoration:underline;text-decoration-color:var(--c-accent);
text-underline-offset:4px}
/* No panel: no border, no shadow, no background, just type sitting on the page. It had a
left border and a padded box, which read as a widget parked beside the article.
Nest visually ONLY when the post MIXES levels: an H2 row carries one bigger dot as a
section marker and an H3 row simply goes smaller. So it reads as a few strong markers
over quieter children rather than a column of identical bullets. The dot is an inline
::before, so it flows for BOTH rail orientations with no per-side handling. */
.rail-lead::before{content:"•";font-size:.72em;margin-inline-end:.5em;vertical-align:.12em;
color:var(--c-meta)}
.rail-sub{font-size:var(--fs-caption);line-height:var(--lh-caption);
letter-spacing:var(--ls-caption)}
.toc-end{margin-top:1rem}
/* Below the rail breakpoint the ToC is the drawer, and a post with a long index needs the
whole column: the listing rail is not on this page to share it with. */
.toc li{margin-top:.5rem}
/* --- islands -------------------------------------------------------------------
Every rule below styles an element the browser bundle CREATES. None of it applies
to the server-rendered page, so a reader with JavaScript off sees no gaps: the
elements simply never exist. */
/* font-family explicitly, because this button lives INSIDE .prose pre and would otherwise
inherit the code face. It is chrome sitting on top of code, not code. */
.code-copy{position:absolute;top:.4rem;right:.4rem;padding:.15rem .5rem;font-size:var(--fs-caption);
line-height:var(--lh-caption);letter-spacing:var(--ls-caption);font-family:var(--font-sans);
border:1px solid var(--c-rule);background:var(--c-bg);color:var(--c-meta);cursor:pointer;opacity:0;transition:opacity .15s}
.prose pre{position:relative}
.prose pre:hover .code-copy,.code-copy:focus-visible{opacity:1}
/* The reading-progress bar has NO script behind it: a scroll-driven animation reads the
document's own scroll position. It therefore works with JavaScript off, and runs off the
main thread. On an engine without scroll timelines the bar would sit at zero forever, so
the @supports rule removes it entirely rather than leaving a dead hairline on the page.
NOTE: no backticks anywhere in this file. It is one template literal, and a backtick in
a comment ends the string. That has now cost two debugging sessions. */
.progress{display:none;position:fixed;inset-inline:0;top:0;height:2px;z-index:50}
.progress-fill{height:100%;background:var(--c-heading);transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:scroll()){
.progress{display:block}
.progress-fill{animation:read-progress linear both;animation-timeline:scroll(root block)}
}
@keyframes read-progress{to{transform:scaleX(1)}}
.to-top{position:fixed;bottom:1.25rem;right:1.25rem;z-index:40;display:flex;width:2.5rem;height:2.5rem;
align-items:center;justify-content:center;border:1px solid var(--c-rule);border-radius:999px;
background:var(--c-bg);color:var(--c-meta);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s,color .2s}
.to-top.shown{opacity:1;pointer-events:auto}
.to-top:hover{color:var(--c-heading)}
/* A