/* Walkthrough-only layout; palette, type and links come from the existing site. */
.walkthrough { max-width: 76rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 3rem); }
.walkthrough h1 { max-width: 23ch; font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.12; }
.walkthrough .intro { max-width: 65ch; }
.walkthrough .capture-note { color: var(--gray-600); max-width: 70ch; }
.walkthrough ol { list-style: none; padding: 0; margin: 2.5rem 0; counter-reset: frame; }
.walkthrough li { counter-increment: frame; border-top: 1px solid var(--gray-200); padding-block: 2.5rem; }
.walkthrough figure { display: grid; gap: 1.5rem; margin: 0; }
.walkthrough figcaption { display: block; font-size: 1rem; line-height: 1.6; padding: 0; color: var(--gray-800); }
.walkthrough h2 { font-size: 1.5rem; line-height: 1.25; max-width: 28ch; }
.walkthrough li h2::before { content: counter(frame) ". "; }
.walkthrough .proof-text { margin-block: 1.25rem; padding: 1rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: .5rem; }
.walkthrough .proof-text p { margin: .3rem 0; }
.walkthrough .screenshot { display: block; align-self: start; }
.walkthrough .screenshot img { display: block; width: 100%; height: auto; max-height: 36rem; object-fit: contain; object-position: top left; }
.walkthrough .full-link, .walkthrough .note-link { display: inline-flex; align-items: center; min-height: 44px; }
.walkthrough .limits { border-top: 1px solid var(--gray-200); padding-top: 2rem; max-width: 70ch; }
.walkthrough summary { cursor: pointer; min-height: 44px; padding-block: .65rem; font-weight: 600; }
.walkthrough a:focus-visible, .walkthrough summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.walkthrough ::selection { color: var(--surface); background: var(--accent-dark); }
@media (min-width: 56rem) {
 .walkthrough figure { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; }
 .walkthrough li { padding-block: 3rem; }
}
@media print { .walkthrough li { break-inside: avoid; } }

.walkthrough code { overflow-wrap: anywhere; }