/* The host supplies theme colours. This stylesheet belongs to your widget. */
body { padding: clamp(12px, 4vmin, 28px); gap: 10px; }
header { flex-shrink: 0; margin: 0; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
p { margin: 0; }
#count { font-size: clamp(40px, 25vmin, 120px); line-height: 1; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--accent); }
.caption { font-size: clamp(14px, 4vmin, 22px); color: var(--muted); }
#increment { flex-shrink: 0; font-size: 18px; min-height: 44px; }
#error:empty { display: none; }
#error { font-size: 13px; color: #ff9c9c; }
@media (max-height: 210px) { header small, .caption { display: none; } body { gap: 6px; } #count { font-size: 44px; } }
main { align-items: center; text-align: center; }
#increment { width: min(100%, 340px); align-self: center; }