.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.stage-row.s-A { --hue: var(--stage-a); }
.stage-row.s-B { --hue: var(--stage-b); }
.stage-row.s-C { --hue: var(--stage-c); }
.stage-row.s-D { --hue: var(--stage-d); }
.stage-row.s-E { --hue: var(--stage-e); }
.stage-row.s-F { --hue: var(--stage-f); }
.post-content dl.stage-rows { margin: 1.25rem 0 1.75rem; border-bottom: 1px solid var(--hairline); }
.post-content .stage-row {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    padding: 0.875rem 0;
    border-top: 1px solid var(--hairline);
}
.post-content .stage-row dt, .post-content .stage-row dd { font-size: var(--site-body); line-height: 1.6; color: var(--site-ink); }
.post-content .stage-row dt { display: flex; align-items: center; gap: 0.875rem; margin: 0; font-weight: 600; }
.post-content .stage-row dd { margin: 0; padding-top: calc((40px - 1.6em) / 2); }

.post-content .stage-row dd { min-height: calc(2 * 1.6em); box-sizing: content-box; }
.stage-row .rv-letter {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--hue);
    color: #FFFFFF;
    font-family: var(--site-sans);
    font-weight: 800;
    font-size: 1.125rem;
    line-height: 1.55;
    letter-spacing: normal;
}

.post-content .diff-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--hairline);
    border-radius: 8px;
    margin: 1.5rem 0 1rem;
}
.post-content .diff-card { padding: 1.25rem 1.25rem 1.375rem; }
.post-content .diff-card + .diff-card { border-left: 1px solid var(--hairline); }
.post-content .diff-card h3 { margin: 0 0 0.5rem; font-size: var(--site-body); line-height: 1.35; }
.post-content .diff-card p { margin: 0; font-size: var(--site-small); line-height: 1.55; color: var(--site-gray); }
.post-content .diff-note { font-size: var(--site-small); line-height: 1.55; color: var(--site-gray); margin: 0 0 1.5rem; }

.post-content .cite-card {
    background: var(--site-tint);
    border-radius: 8px;
    padding: 1.5rem 1.5rem 1.25rem;
    margin: 1rem 0 0;
}
.post-content .cite-card > p { margin: 0 0 1rem; }
.post-content .cite-card > p:last-of-type { margin-bottom: 0; }
.post-content .cite-item { margin: 0 0 1.25rem; }
.post-content .cite-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 0.5rem; }
.post-content .cite-head p { margin: 0; }
.post-content .cite-card pre { background: var(--bg-main); margin: 0; }
.copy-cite {
    flex: none;
    font-family: var(--site-sans);
    font-size: var(--site-small);
    font-weight: 500;
    line-height: 1.4;
    color: var(--link);
    background: transparent;
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}
.copy-cite:hover { background: var(--bg-main); }
.copy-cite:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.post-content ul.next-cards {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.post-content ul.next-cards > li { margin: 0; }
.next-cards a {
    display: block;
    height: 100%;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 1rem 1.125rem;
    text-decoration: none;
}
.next-cards a:hover { border-color: var(--primary); }
.next-cards a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.next-cards .next-title { display: block; font-weight: 600; color: var(--site-ink); margin-bottom: 0.25rem; }
.next-cards .next-desc { display: block; font-size: var(--site-small); line-height: 1.5; color: var(--site-gray); }

@media (max-width: 640px) {
    .post-content .stage-row { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
    .post-content .stage-row dd { padding-top: 0; }
    .post-content .diff-grid { grid-template-columns: minmax(0, 1fr); }
    .post-content .diff-card + .diff-card { border-left: 0; border-top: 1px solid var(--hairline); }
    .post-content .cite-card { padding: 1.25rem 1rem 1rem; }
    .post-content ul.next-cards { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}
@media (max-width: 480px) {

    .post-content .stage-row dd { min-height: calc(3 * 1.6em); }
}