:root { --panel-bg: #ffffff; --border: #d8d2c4; --text: #2b2a26; --muted: #7a766c; --accent: #2e6b34; --easy: #2e8b57; --moderate: #2a6fb0; --hard: #c0392b; } * { box-sizing: border-box; } /* iOS Dynamic Type: the -apple-system-body font shorthand resolves the root font-size to the user's current Dynamic Type body size inside WKWebView, so `rem` (which everything below is written in) scales with it. The shorthand also resets font-family/weight/style/line-height on , so keeps declaring the family stack — descendants inherit from there, unchanged. */ html { font: -apple-system-body; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* body text size tracks the root (which tracks iOS Dynamic Type). Fixed chrome is capped via min() lower down so nav/buttons don't balloon. */ font-size: 1rem; color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Tabs */ header { display: flex; align-items: center; gap: 16px; padding: 0 16px; background: #1f3a24; color: #f4f1e8; min-height: 52px; flex-shrink: 0; /* Wrap so the region