.prose .break {
  border: 0; width: 16px; height: 16px; margin: 3.2rem auto 2.8rem; --m: var(--muted);
  background:
    linear-gradient(var(--m), var(--m)) 0 0 / 6px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) 0 0 / 1.5px 6px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 6px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) 100% 0 / 1.5px 6px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 6px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) 0 100% / 1.5px 6px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 6px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) 100% 100% / 1.5px 6px no-repeat;
}
/* Figures keep text-width outer plates; the 884px minimum inner image stays horizontally scrollable. */
.prose .plate { margin: 2.2rem 0 2.4rem; display: grid; gap: .7rem; min-width: 0; max-width: 100%; }
.plate .frame { background: var(--soft); min-width: 0; }
.plate .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose .plate .scroll img { display: block; width: max(100%, 884px); max-width: none; height: auto; }
.plate .fig-mono { filter: var(--fig-filter); }
/* Be Dependable uses inline, responsive artwork and one accessible name. */
.plate .dependable-figure { min-width: 0; width: 100%; }
.plate .dependable-figure .bd-figure {
  display: block; width: 100%; max-width: 100%; height: auto;
  --fig-accent: var(--accent); --fig-paper: var(--paper);
  --fig-ink: var(--ink); --fig-muted: var(--muted);
  --fig-line: var(--line); --fig-soft: var(--soft);
  --fig-dot: var(--muted); --fig-idle: var(--line);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.plate .dependable-figure .bd-mobile { display: none; }
@media (width < 640px) {
  .plate .dependable-figure .bd-mobile { display: block; }
  .plate .dependable-figure .bd-wide { display: none; }
}
.plate figcaption { font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.plate figcaption .no { color: inherit; font-weight: 600; margin-right: .5em; }
.plate .swipe { display: none; }
@media (max-width: 979px) { .plate .swipe { display: inline; } }


.appendix .meta { font-size: 15px; color: var(--muted); margin: 0 0 .5em; }
.appendix ul { margin: 0 0 .4em; padding-left: 1.2em; display: grid; gap: .3em; }

.appendix { padding-top: .2rem; }

.prose section { padding-top: .2rem; }
.prose section > h2:first-child { margin-top: 0; }
.prose .appendix li { margin: 0; padding-left: 0; }
.prose .appendix .meta { line-height: 1.6; }

/* Four-cell chart (11/11): a real table laid out as a grid, so the words stay at reading size on a phone, follow the
   reader's typeface and the dark colours, and can be read aloud. Two axes only, four cells the same size, no arrows.
   Markup: 文章页规范.md, 四格图. */
.prose .quad { margin: 2.2rem 0 2.4rem; }
.prose .quad table { display: grid; grid-template-columns: 2.1em minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr 1fr; width: 100%; margin: 0; border: 0; }
.prose .quad colgroup { display: none; }
.prose .quad thead, .prose .quad tbody, .prose .quad tr { display: contents; }
.prose .quad th, .prose .quad td { border: 0; background: none; text-align: left; }
.prose .quad thead th { align-self: end; padding: 0 .7em .75em; font-weight: 400; font-size: .82em; line-height: 1.35; color: var(--muted); text-align: center; text-wrap: balance; }
.prose .quad tbody th { display: flex; align-items: center; justify-content: center; padding: 0; font-weight: 400; font-size: .82em; color: var(--muted); }
.prose .quad tbody th > span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
html:lang(zh) .prose .quad tbody th > span { transform: none; letter-spacing: .3em; }
.prose .quad td { min-height: 6.6em; padding: 1em .8em 1.1em; }
.prose .quad thead td { min-height: 0; padding: 0; }
.prose .quad tbody tr:first-child td { border-bottom: 1.5px solid var(--ink); }
.prose .quad tbody td:first-of-type { border-right: 1.5px solid var(--ink); }
.prose .quad td strong { display: block; margin-bottom: .3em; font-size: clamp(1.2em, 6vw, 1.4em); line-height: 1.2; }
.prose .quad td > span { display: block; color: var(--ink-2); line-height: 1.45; }
/* a second line of older roles under the modern ones: a step smaller and grey (11/11) */
.prose .quad td > span + span { margin-top: .3em; font-size: .88em; color: var(--muted); }
/* Chinese role lists break only after a 、, never inside a word */
html:lang(zh) .prose .quad td > span { word-break: keep-all; overflow-wrap: anywhere; }

/* 11/11 23:05 他定: 四格图放进米色纸卡，跟全篇别的图一致：纸色 #f7f4ef、四边留 4%、直角无描边，深浅两种模式都不变；
   卡里用浅色模式的字色和线色，图注留在卡外跟着页面走。 */
.prose .quad table { box-sizing: border-box; padding: 4%; background: #f7f4ef; --ink: #111; --ink-2: #444; --muted: #595959; color: var(--ink); }