:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #20272c; background: #f4f5f3; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 1280px; padding: 32px 24px 48px; }
header { margin-bottom: 28px; }
h1 { font-size: clamp(24px, 4vw, 36px); margin: 8px 0; overflow-wrap: anywhere; }
p { color: #66716f; line-height: 1.6; margin: 0; }
.label { font-size: 12px; letter-spacing: .12em; color: #377263; }
main { display: grid; gap: 20px; }
figure { margin: 0; min-width: 0; overflow: hidden; border: 1px solid #dfe3df; border-radius: 12px; background: white; }
.picture { display: flex; justify-content: center; align-items: center; padding: 16px; background-color: #fdfdfd; background-image: conic-gradient(#eef0ed 25%, transparent 0 50%, #eef0ed 0 75%, transparent 0); background-size: 20px 20px; }
img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.image img { max-height: 75vh; }
.gallery main { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.gallery .picture { height: 280px; }
.gallery img { max-height: 248px; }
.screenshot .picture { padding: 0; }
.screenshot img { width: 100%; }
figcaption { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; font-size: 13px; border-top: 1px solid #e8ebe7; }
figcaption span { flex: 1 1 120px; overflow-wrap: anywhere; color: #66716f; }
a { color: #256454; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid #468f7a; outline-offset: -3px; }
@media (max-width: 600px) { body { padding: 20px 12px 32px; } header { margin-bottom: 20px; } }