/* Screenshot gallery; site typography and theme are shared with the homepage. */
.demo-main { padding-top: 32px; }
.demo-intro { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 16px; }
.demo-intro h1 { max-width: none; font-size: clamp(36px, 4.5vw, 52px); margin: 0; }
.demo-intro > p { margin: 0 0 3px; color: var(--muted); font-size: 15px; }
.demo-project { max-width: 78ch; margin: 0 0 28px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.demo-gallery { display: flex; flex-direction: column; border-top: 1px solid var(--rule); scroll-margin-top: 70px; }
.demo-slide { margin: 0 0 40px; }
.demo-gallery[data-ready] .demo-slide { margin: 0; }
.demo-slide[hidden], .gallery-controls[hidden], .capture-controls[hidden], .screenshot-stage[hidden] { display: none; }
.slide-heading { min-height: 120px; padding: 24px 0; display: flex; gap: 32px; align-items: start; }
.slide-number { color: var(--muted); font: 11px var(--mono); padding-top: 10px; white-space: nowrap; }
.slide-heading h2 { max-width: none; margin: 0 0 8px; font-size: clamp(28px, 3vw, 36px); }
.slide-heading p { color: var(--muted); margin: 0; font-size: 17px; }
.screenshot-stage { margin: 0; padding: 32px; display: grid; place-items: center; min-height: 620px; background: color-mix(in srgb, var(--green) 7%, var(--paper)); border: 1px solid color-mix(in srgb, var(--rule) 45%, var(--paper)); touch-action: pan-y; }
.screenshot-link { display: block; width: 100%; position: relative; color: var(--green); cursor: zoom-in; }
.screenshot-link picture { display: flex; align-items: center; justify-content: center; }
.screenshot-link img { display: block; max-width: 100%; width: auto; height: auto; max-height: 570px; box-shadow: 0 20px 45px -30px #162a2370; }
.zoom-hint { position: absolute; bottom: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; color: var(--green); background: var(--surface); border: 1px solid var(--rule); }
.zoom-hint svg { width: 19px; height: 19px; }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); padding: 12px 0; position: sticky; top: 70px; z-index: 5; background: var(--paper); }
.demo-tabs { display: flex; gap: 6px; }
.demo-tabs button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; background: transparent; color: var(--muted); font: 12px var(--mono); cursor: pointer; }
.demo-tabs button[aria-selected='true'] { color: var(--green); border-color: var(--rule); background: var(--surface); }
.demo-tabs button:hover { color: var(--green); }
.tab-number { color: var(--muted); font-size: 9px; }
.slide-arrows { display: flex; gap: 8px; }
.slide-arrow { width: 44px; height: 44px; display: grid; place-items: center; color: var(--green); border: 1px solid var(--rule); background: transparent; cursor: pointer; }
.slide-arrow:hover { background: var(--surface); }
.slide-arrow svg { width: 20px; height: 20px; }
.slide-arrow.previous svg { transform: rotate(180deg); }
.technical-note { border-bottom: 1px solid var(--rule); }
.technical-heading { display: flex; align-items: baseline; gap: 16px; min-height: 52px; padding: 16px 0; color: var(--green); font: 12px/1.6 var(--mono); }
.technical-heading h3 { margin: 0; font: inherit; }
.technical-label { margin-left: auto; color: var(--muted); text-align: right; }
.technical-note > p { max-width: 65ch; margin: 0 0 24px; font-size: 16px; line-height: 1.65; }
.demo-after { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 40px; }
.demo-after p { color: var(--muted); font: 10px/1.6 var(--mono); margin: 0; }
.demo-after a { font-size: 16px; white-space: nowrap; }
.screenshot-dialog { width: min(1400px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.screenshot-dialog::backdrop { background: #101b17c9; backdrop-filter: blur(5px); }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 20px; background: var(--paper); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 1; }
.lightbox-bar h2 { margin: 0; font-size: 22px; max-width: none; }
.lightbox-bar form { margin: 0; }
.lightbox-bar button { width: 44px; height: 44px; background: transparent; border: 1px solid var(--rule); color: var(--ink); font-size: 26px; cursor: pointer; }
.lightbox-image { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
 .demo-slide.is-entering { animation: screenshot-fade 300ms ease both; }
 @keyframes screenshot-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 960px) {
 .tab-number { display: none; }
 .demo-tabs button { padding-inline: 12px; }
 .screenshot-stage { padding: 24px; min-height: 520px; }
 .screenshot-link img { max-height: 480px; }
}
@media (max-width: 720px) {
 .demo-intro { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 16px; }
 .demo-intro > p { font-size: 14px; }
 .demo-project { margin-bottom: 24px; font-size: 15px; }
 .slide-heading { min-height: 140px; gap: 16px; }
 .slide-heading p { font-size: 15px; }
 .slide-number { font-size: 9px; padding-top: 7px; }
 .screenshot-stage { padding: 16px; min-height: 580px; }
 .screenshot-link img { max-height: 640px; }
 .gallery-controls { gap: 10px; flex-wrap: wrap; }
 .demo-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
 .demo-tabs button { flex: 1; justify-content: center; padding-inline: 8px; font-size: 10px; }
 .slide-arrows { margin-left: auto; }
 .technical-heading { gap: 8px; font-size: 10px; }
 .technical-note > p { font-size: 15px; }
 .demo-after { flex-direction: column; align-items: start; gap: 14px; }
 .screenshot-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
 .lightbox-bar { padding: 8px 12px; gap: 12px; }
 .lightbox-bar h2 { font-size: 20px; }
}
@media (max-width: 390px) {
 .slide-heading { gap: 10px; min-height: 156px; }
 .slide-heading h2 { font-size: 25px; }
 .demo-tabs button { font-size: 9px; padding-inline: 5px; }
 .screenshot-stage { padding: 8px; }
}

#operations .screenshot-stage { min-height: clamp(260px, 40vw, 520px); }
.screenshot-dialog[data-detail="code"] .lightbox-image { min-width: 1000px; }

.capture-controls { display: flex; align-items: center; gap: 20px; margin: 0 0 16px; }
.capture-controls button { min-height: 44px; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 12px/1.5 var(--mono); cursor: pointer; }
.capture-controls button[aria-pressed="true"] { border-bottom-color: var(--green); color: var(--green); }
.capture-controls button:hover { color: var(--green); }
.capture-count { margin-left: auto; color: var(--muted); font: 11px var(--mono); white-space: nowrap; }
.capture-caption { margin-top: 16px; color: var(--muted); font: 12px var(--mono); }
.demo-gallery[data-ready] .capture-caption { display: none; }
.demo-gallery:not([data-ready]) .screenshot-stage + .screenshot-stage { margin-top: 16px; }
@media (max-width: 720px) {
 .capture-controls { gap: 16px; }
 .capture-controls button, .capture-count { font-size: 10px; }
}