.app-gallery{margin:24px 0 30px;min-width:0}
.app-gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.app-gallery-heading h2{font-size:21px;margin:0;letter-spacing:0}
.app-gallery-controls{display:flex;gap:8px}
.app-gallery-controls[hidden]{display:none}
.app-gallery button,.app-screenshot-dialog button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;padding:0;border:1px solid var(--line,#d8dfd5);border-radius:6px;background:var(--paper,#fffef9);color:var(--ink,#263b36);font:23px/1 Arial,sans-serif;cursor:pointer}
.app-gallery button:hover,.app-screenshot-dialog button:hover{background:#e1eae5}
.app-gallery button:disabled{opacity:.35;cursor:default}
.app-gallery-strip{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:4px 2px 12px}
.app-gallery-strip figure{flex:0 0 186px;width:186px;margin:0;scroll-snap-align:start}
.app-gallery-strip a{display:block;border:1px solid var(--line,#d8dfd5);border-radius:6px;overflow:hidden;background:#f7f5f0}
.app-gallery-strip img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain}
.app-gallery-strip figcaption{margin-top:8px;font-size:14px;color:var(--muted,#52645a)}
.app-screenshot-dialog{box-sizing:border-box;width:min(760px,calc(100% - 24px));max-width:calc(100% - 24px);height:min(940px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:12px;border:1px solid var(--line,#d8dfd5);border-radius:8px;background:var(--paper,#fffef9);color:var(--ink,#263b36);overflow:hidden}
.app-screenshot-dialog::backdrop{background:rgba(12,22,19,.8)}
.app-screenshot-dialog[open]{display:flex;flex-direction:column;gap:12px}
.app-screenshot-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;min-height:42px}
.app-screenshot-toolbar span{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.app-screenshot-view{display:flex;align-items:center;gap:10px;flex:1;min-height:0;min-width:0}
.app-screenshot-view img{display:block;flex:1;min-width:0;width:0;height:100%;object-fit:contain}
html:has(.app-screenshot-dialog[open]){overflow:hidden}
@media(max-width:500px){.app-gallery-strip{gap:12px}.app-gallery-strip figure{flex-basis:158px;width:158px}.app-screenshot-dialog{padding:10px}.app-screenshot-view{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 42px;gap:8px}.app-screenshot-view img{grid-column:1/-1;grid-row:1;width:100%}.app-screenshot-view button{grid-row:2}.app-screenshot-view [data-screenshot-next]{justify-self:end}.app-screenshot-toolbar span{font-size:14px}}
