:root { color-scheme: light; font-family: Arial, sans-serif; color: #073b43; background: #e5ebe9; }
* { box-sizing: border-box; }
body { margin: 0; }
header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  color: #fff;
  background: #073b43;
  box-shadow: 0 2px 10px #0002;
}
nav { max-width: 1100px; margin: auto; display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
nav a { min-height: 48px; padding: 12px 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; font-size: 15px; font-weight: 700; text-decoration: none; }
.download { color: #fff; border: 1px solid #fff7; }
nav a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid #e19132; outline-offset: 3px; }
h1 { max-width: 1100px; margin: 12px auto 0; font-size: 16px; line-height: 1.35; font-weight: 400; }
main { max-width: 1100px; margin: 20px auto; padding: 0 16px 32px; }
figure { margin: 0 0 24px; }
figure svg { width: 100%; height: auto; display: block; background: #fff; box-shadow: 0 2px 12px #0001; }
svg a:hover rect, svg a:focus-visible rect { fill: #f3d67555; stroke: #073b43; stroke-width: 1; }
figcaption { text-align: center; padding: 10px 0 0; font-size: 13px; }
@media (max-width: 480px) {
  main { padding: 0 4px 24px; margin-top: 12px; }
  nav a { padding: 12px; font-size: 14px; }
}
@media print {
  header { display: none; }
  main { padding: 0; margin: 0; max-width: none; }
  figure { break-after: page; }
  figure svg { box-shadow: none; }
}