body { font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto', 'Segoe UI', monospace; line-height:1.5; color:#222; margin:0; padding:0; background:#f7f7fb }
.site-header { background: #667eea; color: white; padding:28px 24px }
.site-header h1 { margin:0; font-size:22px }
.content { max-width:900px; margin:28px auto; padding:0 18px }
.content section { margin-bottom:18px; background:white; padding:16px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.06) }
.site-footer { text-align:center; padding:18px; color:#666 }
code { background:#f1f1f1; padding:2px 6px; border-radius:4px }

.screenshots { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap }
.screenshots figure { margin:0; width:100%; max-width:420px }
.screenshots img { display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.08) }

/* Specific sizing: vertical and horizontal variants */
.screenshot-vertical { max-height:520px; width:auto; max-width:320px }
.screenshot-horizontal { max-width:640px; height:auto }

@media (max-width: 720px) {
	.screenshots { flex-direction:column }
	.screenshots figure { max-width:100% }
	.screenshot-vertical, .screenshot-horizontal { max-width:100%; max-height:420px }
}