.project-screenshot{margin:26px 0 0;max-width:380px}.screenshot-trigger{display:block;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--white);transition:border-color .2s,box-shadow .2s}.screenshot-trigger:hover{border-color:#94a189;box-shadow:0 4px 18px #173d320c}.screenshot-trigger img{width:100%;height:156px;object-fit:contain;background:#e8eae2;cursor:zoom-in}.screenshot-caption{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:10px;line-height:1.7;color:var(--muted)}.screenshot-caption>span:last-child{color:var(--ink)}
.image-viewer{width:min(1400px,96vw);max-width:96vw;max-height:94vh;max-height:94dvh;padding:0;border:1px solid #bac4b4;border-radius:7px;background:var(--paper);color:var(--ink);box-shadow:0 22px 100px #0d261850}.image-viewer::backdrop{background:#101c15bf}.viewer-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;border-bottom:1px solid var(--line)}.viewer-header h2{font:500 15px/1.6 var(--sans);letter-spacing:0;margin:0}.viewer-close{flex-shrink:0;cursor:pointer;border:0;background:none;color:var(--ink);font-size:12px;padding:6px 0 6px 12px}.viewer-close span{font-size:22px;vertical-align:middle;margin-left:10px}.viewer-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 22px}.viewer-tools p{margin:0;color:var(--muted);font-size:11px}.viewer-zoom{flex-shrink:0;cursor:pointer;font-size:12px;border:1px solid var(--line);border-radius:3px;color:var(--ink);background:var(--white);padding:7px 14px}.viewer-zoom:hover{border-color:var(--ink)}.viewer-canvas{overflow:auto;max-height:calc(94vh - 150px);max-height:calc(94dvh - 150px);background:#e8eae2;overscroll-behavior:contain}.viewer-canvas img{display:block;width:100%;height:auto;max-width:none;margin:0 auto}.viewer-canvas.is-zoomed img{width:auto;max-width:none;max-height:none;margin:0}.viewer-canvas:focus-visible{outline:2px solid #82916e;outline-offset:-3px}
@media(max-width:700px){.project-screenshot{max-width:360px;margin-top:22px}.screenshot-trigger img{height:auto;max-height:160px}.viewer-header{gap:10px;padding:12px 14px}.viewer-header h2{font-size:12px}.viewer-tools{gap:12px;padding:10px 14px}.viewer-tools p{font-size:10px;line-height:1.7}.viewer-zoom{font-size:11px;padding:7px 10px}.viewer-close{font-size:11px}.viewer-close span{margin-left:6px}.viewer-canvas{max-height:calc(94dvh - 145px)}}