:root {
  --muted: #666;
  --code-bg: #f5f5f5;
  --zebra-a: #f0f0f0;
  --zebra-b: #e2e2e2;
}
html { -webkit-text-size-adjust: 100%; }
body { font-family: system-ui, sans-serif; max-width: 44rem; margin: 1rem auto;
       padding: 0 max(1rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1rem, env(safe-area-inset-left));
       line-height: 1.5; background: #fff; overflow-wrap: anywhere; }
h1 { margin-bottom: 0.2rem; }
h3 { margin-bottom: 0.2rem; margin-top: 0; }
.exmeta, .stats, .status { color: var(--muted); }
pre { white-space: pre-wrap; background: var(--code-bg); padding: 0.6rem; border-radius: 4px; }
a.home { display: inline-block; margin-bottom: 1rem; }
input, textarea, button, select { font: inherit; font-size: 16px; padding: 0.2rem 0.3rem; } /* 16px stops iOS zoom-on-focus */
.exercise { padding: 0.6rem 0.8rem; margin: 0.8rem 0; border-radius: 6px; background: var(--zebra-a); }
.exercise.alt { background: var(--zebra-b); }