.gallery-intro{max-width:760px;margin-bottom:30px}.gallery-intro .ui-heading-page{margin:0 0 18px}.gallery-intro p{line-height:1.75}.gallery-hint{font-size:14px;color:#72542f}.screenshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 26px}.screenshot-card{margin:0;min-width:0}.screenshot-featured{grid-column:1/-1}.screenshot-card figcaption{padding:17px 4px 0}.screenshot-card h2{margin:0 0 9px}.screenshot-card p{margin:0;line-height:1.75;color:#654523}.screenshot-expand{position:absolute;bottom:18px;right:18px;padding:6px 12px;background:#09282bef;color:#ffe5ad;font-size:13px;border:1px solid #ba955a}.screenshot-frame:focus-visible{outline:3px solid #986215;outline-offset:5px}.gallery-join{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ad875750;margin-top:38px;padding-top:25px}.gallery-join p{margin:0}.gallery-join a{text-decoration:none}.gallery-viewer-open{overflow:hidden}
#screenshot-viewer{width:calc(100% - 32px);max-width:1800px;height:calc(100dvh - 32px);max-height:none;padding:16px;border:2px solid #c39a54;border-radius:4px;background:#09282b url(magazine/petrol-texture-v1.webp) center/384px;color:#f5e2bc;box-shadow:0 12px 60px #000a}
#screenshot-viewer[open]{display:flex;flex-direction:column;gap:12px}#screenshot-viewer::backdrop{background:#020f14dd}.screenshot-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.screenshot-toolbar h2{margin:0;color:#f5e2bc}.screenshot-toolbar button{font-size:28px}.screenshot-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;background:#05171b}.screenshot-stage img{display:block;width:100%;height:100%;object-fit:contain}.screenshot-stage.is-zoomed{display:block}.screenshot-stage.is-zoomed img{width:1440px;height:1080px;max-width:none;object-fit:initial}.screenshot-controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.screenshot-controls a{color:#f5e2bc;padding:10px}.screenshot-controls button,.screenshot-toolbar button{min-width:44px;min-height:44px;color:#ffe8b7;border:1px solid #b28a44;background:#123b40;padding:7px 13px;font:inherit;cursor:pointer}#screenshot-viewer :focus-visible{outline:2px solid #ffe5a4;outline-offset:3px}.gallery-page .skip-link{position:absolute;top:-100px;left:16px}.gallery-page .skip-link:focus{top:12px;background:#f5e2bc;padding:12px;z-index:99}
@media(max-width:700px){.screenshot-grid{grid-template-columns:1fr;gap:28px}.gallery-intro{margin-bottom:24px}.gallery-join{flex-direction:column;align-items:flex-start}.screenshot-expand{font-size:11px;padding:4px 7px;bottom:15px;right:15px}#screenshot-viewer{padding:10px;width:calc(100% - 12px);height:calc(100dvh - 12px)}.screenshot-controls{gap:6px}.screenshot-controls button,.screenshot-controls a{font-size:13px}.screenshot-toolbar h2{font-size:19px}}
.screenshot-frame{position:relative;display:block;width:100%;padding:10px;border:2px solid transparent;border-radius:3px;background:linear-gradient(#09282b55,#09282b55) padding-box,url(magazine/petrol-texture-v1.webp) center/384px padding-box,linear-gradient(135deg,#f4dea5,#b68b46 22%,#705026 48%,#d2aa61 73%,#f2d79b) border-box;box-shadow:inset 0 0 0 1px #f5d78d66,0 2px 3px #39250e44,0 10px 22px #4a2b1c33;cursor:zoom-in;overflow:hidden}
.screenshot-frame::before{content:'';position:absolute;inset:7px;border:1px solid #d4af6977;box-shadow:0 0 0 1px #031e24aa;pointer-events:none}
.screenshot-frame::after{content:'';position:absolute;inset:3px;pointer-events:none;background:linear-gradient(90deg,#f1d797,#b88c44) left top/23px 2px no-repeat,linear-gradient(#f1d797,#b88c44) left top/2px 23px no-repeat,linear-gradient(270deg,#f1d797,#b88c44) right top/23px 2px no-repeat,linear-gradient(#f1d797,#b88c44) right top/2px 23px no-repeat,linear-gradient(90deg,#d9b56b,#9a7237) left bottom/23px 2px no-repeat,linear-gradient(0deg,#d9b56b,#9a7237) left bottom/2px 23px no-repeat,linear-gradient(270deg,#e9cb88,#ae8240) right bottom/23px 2px no-repeat,linear-gradient(0deg,#e9cb88,#ae8240) right bottom/2px 23px no-repeat}
.screenshot-frame img{display:block;width:100%;height:auto;object-fit:contain;border-radius:1px;box-shadow:0 0 0 1px #041b1e}
.screenshot-frame:hover{box-shadow:inset 0 0 0 1px #ffe3a5aa,0 2px 3px #39250e44,0 12px 25px #4a2b1c44}