/* A single full application view. Without JavaScript, the anchor navigation
   leads to six full-width previews and their direct prototype links. */
.prototype-gallery { scroll-margin-top:calc(var(--nav-h) + var(--air-3)); }
.prototype-gallery__intro { max-width:76ch; margin:var(--air-2) 0 0; color:var(--text-secondary); line-height:1.65; }
.prototype-explorer { max-width:1180px; margin:var(--air-3) auto 0; }
.prototype-explorer__toolbar { display:flex; align-items:center; gap:var(--air-3); margin-bottom:var(--air-2); }
.prototype-explorer__nav { display:flex; flex:1; min-width:0; align-items:stretch; gap:4px; padding-block:2px; }
.prototype-explorer__tab { position:relative; display:flex; align-items:center; justify-content:center; flex:1; min-width:0; min-height:48px; padding:10px 12px; border-radius:6px 6px 0 0; color:var(--text-secondary); font-family:var(--sans); font-size:14px; font-weight:500; line-height:1.45; text-decoration:none; }
.prototype-explorer__tab::before { content:""; position:absolute; inset:auto 12px 0; width:auto; height:2px; background:var(--cx-filet); }
.prototype-explorer__tab:hover { color:var(--text-primary); background:color-mix(in srgb,var(--text-primary) 4%,transparent); }
.prototype-explorer__tab[aria-selected="true"] { color:var(--text-primary); font-weight:600; background:color-mix(in srgb,var(--text-primary) 6%,transparent); }
.prototype-explorer__tab[aria-selected="true"]::before { background:var(--amber); }
.prototype-explorer__tab:focus-visible,.prototype-explorer__open:focus-visible { outline:2px solid var(--amber); outline-offset:4px; }
.prototype-explorer__stage,.prototype-explorer__panels { min-width:0; }
.prototype-explorer__controls { display:flex; align-items:center; justify-content:flex-end; flex:none; gap:8px; }
.prototype-explorer__controls[hidden] { display:none; }
.prototype-explorer__count { margin-right:var(--air-1); color:var(--text-primary); font-family:var(--sans); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.prototype-explorer__total { color:var(--text-secondary); font-weight:400; }
.prototype-explorer__arrow { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--cx-filet); border-radius:50%; background:transparent; color:var(--text-primary); cursor:pointer; }
.prototype-explorer__arrow:hover { border-color:var(--text-secondary); background:color-mix(in srgb,var(--text-primary) 5%,transparent); }
.prototype-explorer__arrow:focus-visible { outline:2px solid var(--amber); outline-offset:4px; }
.prototype-explorer__arrow svg { width:20px; height:20px; }
.prototype-explorer__status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.prototype-explorer__panel { min-width:0; scroll-margin-top:calc(var(--nav-h) + var(--air-3)); }
.prototype-explorer__panel + .prototype-explorer__panel { margin-top:var(--air-4); }
.prototype-explorer[data-ready] .prototype-explorer__panel { margin-top:0; }
.prototype-explorer__panel[hidden] { display:none; }
.prototype-explorer__screen { display:grid; place-items:center; margin:0; padding:clamp(16px,2.5vw,40px); touch-action:pan-y pinch-zoom; background:color-mix(in srgb,var(--text-primary) 3%,transparent); border-radius:12px; }
.prototype-explorer__screen-link { display:block; width:min(100%,1000px,calc(72svh * 1.2311)); aspect-ratio:2280/1852; border-radius:8px; }
.prototype-explorer__screen-link:focus-visible { outline:2px solid var(--amber); outline-offset:5px; }
.prototype-explorer__screen img { display:block; width:100%; height:100%; max-height:none; object-fit:contain; object-position:center; border-radius:8px; filter:drop-shadow(0 2px 4px #02060d16) drop-shadow(0 16px 24px #02060d1f); }
.prototype-explorer__caption { display:flex; align-items:start; justify-content:space-between; gap:var(--air-3); padding-top:var(--air-2); }
.prototype-explorer__copy { min-width:0; max-width:56ch; }
.prototype-explorer__copy h3 { margin:0; color:var(--text-primary); font-family:var(--display); font-size:clamp(18px,1.5vw,22px); font-weight:var(--fw-semibold); line-height:1.4; letter-spacing:-.02em; }
.prototype-explorer__copy p { margin:var(--air-1) 0 0; color:var(--text-secondary); font-size:14px; line-height:1.6; }
.prototype-explorer__open { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:10px 0; color:var(--text-primary); font-family:var(--sans); font-size:14px; font-weight:600; line-height:1.5; text-decoration:underline; text-decoration-color:var(--cx-filet); text-underline-offset:5px; }
.prototype-explorer__language { color:var(--text-secondary); font-size:10px; font-weight:500; letter-spacing:.06em; text-decoration:none; }
.prototype-explorer__open svg { flex:none; width:16px; height:16px; }
.prototype-explorer__open:hover { text-decoration-color:currentColor; }
@media(max-width:1100px) {
 .prototype-explorer__caption { flex-direction:column; gap:var(--air-1); }
}
@media(max-width:900px) {
 .prototype-explorer__toolbar { flex-wrap:wrap; gap:var(--air-1); }
 .prototype-explorer__controls { width:100%; }
 .prototype-explorer__nav { flex-direction:row; flex:1 1 100%; gap:4px; min-width:0; padding:4px 2px 8px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--cx-filet) transparent; }
 .prototype-explorer__tab { flex:none; min-height:48px; max-width:210px; padding:10px 14px; border-radius:6px 6px 0 0; font-size:13px; }
 .prototype-explorer__tab::before { inset:auto 12px 0; width:auto; height:2px; }
 .prototype-explorer__tab span { white-space:nowrap; }
 .prototype-explorer__tab:focus-visible { outline-offset:-2px; }
}
@media(max-width:520px) {
 .prototype-explorer__copy h3 { font-size:18px; }
 .prototype-explorer__screen img { border-radius:4px; filter:drop-shadow(0 8px 10px #02060d20); }
}
@media(prefers-reduced-motion:no-preference) {
 .prototype-explorer[data-ready] .prototype-explorer__panel:not([hidden]) .prototype-explorer__screen-link { animation:prototype-reveal .28s ease-out both; }
 @keyframes prototype-reveal { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
}