.semantic-block{position:relative;margin:clamp(2.25rem,6vw,5rem) 0;padding:1.25rem 0 1.5rem;border-block:1px solid color-mix(in srgb,var(--line,#fff) 34%,transparent);font-family:"Noto Sans SC",sans-serif}.semantic-block>header{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;color:var(--muted,#9aa2ac);font:500 .7rem/1.4 "JetBrains Mono",monospace}.semantic-block>header i{font-style:normal;color:var(--accent,#d6ff73)}.semantic-block h2{margin:0 0 1.2rem;font:600 clamp(1.25rem,3vw,2rem)/1.3 "Noto Serif SC",serif}.semantic-fallback{display:grid;grid-template-columns:minmax(8rem,.28fr) 1fr;gap:1rem}.semantic-fallback strong{font:500 .72rem/1.5 "JetBrains Mono",monospace;color:var(--accent,#d6ff73)}.semantic-fallback p{margin:0}.semantic-fallback small{grid-column:2;color:var(--muted,#9aa2ac)}@media(max-width:640px){.semantic-block{margin:2.5rem 0}.semantic-fallback{grid-template-columns:1fr}.semantic-fallback small{grid-column:1}}@media print{.semantic-block{break-inside:avoid}.semantic-block>header{color:#444}}

/* Shared frame: every block opens with the same quiet title and caption, so
   blocks read as figures in the article rather than section headings. */
html .semantic-block > h2,
html .semantic-block .semantic-title {
  max-width: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  color: var(--ink);
  font: 600 1.06rem/1.5 var(--font-sans);
  letter-spacing: 0;
}
html .semantic-block .semantic-title:has(+ .semantic-caption) { margin-bottom: .3rem; }
.semantic-block .semantic-caption { max-width: 46rem; margin: 0 0 1.25rem; color: var(--ink-dim); font-size: .86rem; line-height: 1.75; }
/* Article list spacing is for prose; inside a block every list sets its own. */
html .semantic-block :is(ol, ul) { margin-block: 0; padding-left: 0; }
html .semantic-block li { margin-bottom: 0; }
html .semantic-block img { margin: 0; }