:root { color-scheme: light; font-family: system-ui, sans-serif; color: #20332b; background: #f5f7f6; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
header { padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-left)); background: white; border-bottom: 1px solid #dce4df; }
header a { font-size: 1.1rem; font-weight: 750; color: #20332b; text-decoration: none; }
main { width: min(600px, calc(100% - 32px)); margin: 40px auto; padding: 28px max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: white; border: 1px solid #dce4df; border-radius: 16px; }
h1 { font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.2; margin-top: 8px; }
.eyebrow { color: #106b4b; font-weight: 650; margin-bottom: 0; }
aside { padding: 16px; border-radius: 8px; background: #edf5f0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
a { color: #106b4b; }
button { border: 0; border-radius: 8px; padding: 12px 20px; min-height: 44px; background: #106b4b; color: white; font: inherit; font-weight: 650; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #20332b; outline-offset: 4px; }
@media(max-width: 400px) { main { padding: 24px 20px; margin-top: 24px; } }