:root { font-family: system-ui, sans-serif; color: #17352c; background: #f3f6f4; }
* { box-sizing: border-box; }
body { max-width: 1100px; margin: auto; padding: 24px; line-height: 1.6; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.brand { font-size: 1.25rem; font-weight: 750; text-decoration: none; }
.language { margin-left: auto; display: flex; gap: 8px; }
nav { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 24px; }
a { color: #186847; }
button, .button { display: inline-block; padding: 10px 18px; border-radius: 8px; border: 1px solid #186847; background: white; color: #186847; font: inherit; cursor: pointer; }
button[aria-pressed=true], .button { background: #186847; color: white; }
:focus-visible { outline: 3px solid #ca8500; outline-offset: 4px; }
main { margin: 40px 0; padding: clamp(20px, 5vw, 56px); background: white; border-radius: 16px; }
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.2; max-width: 22ch; }
p { max-width: 65ch; }
.notice { border-left: 3px solid #ca8500; padding-left: 16px; }
[role=alert] { padding: 20px; border: 1px solid #a83b2e; border-radius: 8px; }
footer { color: #4c6059; font-size: .9rem; }
@media (max-width: 480px) { body { padding: 16px; } header { gap: 12px; } nav { gap: 8px 16px; } }