.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.gallery-launch,.gallery-exit{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:.3rem .85rem;border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink);font-size:.8125rem;line-height:1.3;text-decoration:none}
.gallery-mode .masthead,.gallery-mode .app-nav,.gallery-mode footer{display:none}
.gallery-mode #main{width:100%;max-width:none;margin:0;padding:0}
.gallery-mode h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.gallery-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:.5rem;padding:max(.5rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .5rem max(1rem,env(safe-area-inset-left));background:var(--paper);border-bottom:1px solid var(--rule)}
.gallery-mark{display:grid;place-items:center;flex:none;min-width:44px;min-height:44px}
.gallery-mark img{width:32px;height:auto}
.gallery-bar .gallery-exit{margin-inline-start:auto;max-width:40vw;text-align:center}
.gallery-filters{display:flex;gap:.5rem;min-width:0;flex-wrap:wrap}
.gallery-filters[hidden],.gallery-mode .gallery-stop[hidden]{display:none}
.gallery-filters button{position:relative;font:inherit;font-size:.8125rem;white-space:nowrap;border:1px solid var(--rule);border-radius:999px;padding:.3rem .85rem;min-height:32px;line-height:1.3;background:transparent;color:var(--muted);cursor:pointer;flex:none}
.gallery-filters button[aria-pressed=true]{background:var(--panel);color:var(--ink);border-color:var(--muted)}
.gallery-progress{font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.gallery-mode #main>.gallery-stop{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2vw,1.5rem);width:100%;max-width:none;min-height:0;margin:0;padding:clamp(1.5rem,4vw,3rem) max(clamp(1rem,4vw,3rem),env(safe-area-inset-left),env(safe-area-inset-right));border:0;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--gallery-toolbar,6rem) + 1rem)}
.gallery-stop>img,.gallery-caption{width:min(100%,60rem);min-width:0;margin-inline:auto}
.gallery-stop>img{display:block;height:auto;max-height:16rem;object-fit:contain;object-position:center bottom}
.gallery-caption small{font-size:.8125rem;color:var(--muted)}
.gallery-caption h2{font-family:inherit;font-weight:600;font-size:clamp(1.5rem,3vw,2.75rem);line-height:1.2;letter-spacing:-.02em;margin:.25rem 0;overflow-wrap:anywhere}
.gallery-caption h2 a{text-decoration:none}
.gallery-caption p{font-size:1rem;line-height:1.6;max-width:62ch;margin:.5rem 0 0}
.gallery-caption .gallery-jp{font-size:.9375rem;color:var(--muted);line-height:1.5;margin:.25rem 0 .6rem;letter-spacing:0}
html:is(:lang(ja),:lang(zh),:lang(ko),:lang(th),:lang(ne),:lang(my)) .gallery-caption h2{line-height:1.4;letter-spacing:0}
@media(max-width:1100px){.gallery-bar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px auto;gap:.5rem}.gallery-mark{grid-column:1}.gallery-bar .theme-picker{grid-column:3;grid-row:1}.gallery-bar .gallery-exit{grid-column:4;grid-row:1}.gallery-progress{grid-column:2;grid-row:1}.gallery-filters{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;padding:.25rem 0;overscroll-behavior-x:contain;scroll-padding-inline:.25rem}.gallery-bar .gallery-exit{margin:0;max-width:min(42vw,18rem);overflow-wrap:anywhere;line-height:1.35}.gallery-bar .theme-picker{width:44px;height:44px}.gallery-filters::-webkit-scrollbar{display:none}}
@media(hover:hover){.gallery-filters button:hover,.gallery-exit:hover{background:var(--panel);border-color:var(--muted)}}

/* Use a real, bounded scrolling element rather than relying on viewport propagation. */
body.gallery-mode{height:100vh;height:100dvh;overflow:hidden}
.gallery-mode #main{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-padding-top:calc(var(--gallery-toolbar,6rem) + var(--gallery-snap-gap,.5rem));overscroll-behavior-y:contain}
.gallery-mode #main>.gallery-stop{scroll-snap-align:start;scroll-snap-stop:normal;scroll-margin-top:0}
@media(prefers-reduced-motion:reduce){.gallery-mode #main{scroll-snap-type:y proximity}}
html.gallery-zoomed .gallery-mode #main{scroll-snap-type:none}

/* Keep fast flicks native: snap may skip cards, with no scripted easing. */
.gallery-mode #main{scroll-behavior:auto;padding-bottom:env(safe-area-inset-bottom)}
.gallery-filters button:focus-visible{outline-offset:-3px}
@media(max-width:380px){.gallery-bar{column-gap:.25rem}.gallery-bar .gallery-exit{padding-inline:.7rem}.gallery-filters{gap:.5rem}.gallery-progress{font-size:.75rem}}

/* The line-up: every train's nose, large enough to tell the shapes apart. Three arrangements of the same drawings sit side by side; flick or
   tap a name to move between them. Each nose leads to that train's full stop below. */
.gallery-overview{padding:clamp(1.25rem,3vw,2.25rem) max(clamp(1rem,4vw,3rem),env(safe-area-inset-left),env(safe-area-inset-right)) clamp(1.5rem,4vw,3rem);border-bottom:1px solid var(--rule)}
.gallery-mode #main>.gallery-overview{width:100%;max-width:none;margin:0;scroll-snap-align:start;scroll-margin-top:0}
.overview-tabs{position:relative;display:flex;gap:clamp(1.15rem,3.2vw,2rem);width:min(100%,72rem);margin:0 auto 1rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--rule)}
.overview-tabs::-webkit-scrollbar{display:none}
.overview-tabs button{flex:none;font:inherit;font-size:.9375rem;line-height:1.3;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:.78rem 0 .66rem;min-height:44px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color 140ms ease}
.overview-tabs button[aria-selected=true]{color:var(--ink)}
.overview-tabs:not(.is-live) button[aria-selected=true]{border-bottom-color:var(--accent)}
.overview-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:4px}
.overview-indicator{position:absolute;left:0;bottom:0;width:var(--ind-w,0);height:2px;transform:translateX(var(--ind-x,0));background:var(--accent);border-radius:2px 2px 0 0;pointer-events:none;will-change:transform,width}
.overview-pager{display:flex;width:min(100%,72rem);margin-inline:auto;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.overview-pager::-webkit-scrollbar{display:none}
.overview-page{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding-block:.75rem .25rem}
.overview-page h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.overview-page ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10.25rem),1fr));gap:clamp(1.25rem,3vw,1.9rem) clamp(.75rem,2vw,1.25rem)}
.overview-cell[hidden]{display:none}
.overview-cell a{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.overview-cell .nose{display:block;aspect-ratio:2.4/1;overflow:hidden}
.overview-cell .nose img{display:block;height:100%;width:auto;max-width:none;transition:transform 140ms ease}
.overview-cell b{display:block;margin-top:.4rem;font-weight:600;font-size:.9375rem;line-height:1.3}
.overview-cell small{display:block;font-size:.8125rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.overview-cell a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@media(hover:hover) and (pointer:fine){.overview-cell a:hover .nose img{transform:translateX(-2.5%)}.overview-cell a:hover b{color:var(--accent)}.overview-tabs button:hover{color:var(--ink)}}
.overview-tabs button:active{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.overview-cell .nose img,.overview-tabs button{transition:none}}
.overview-page[inert] ul{visibility:hidden}