:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #1b332d; background: #f6f5ed; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100%, 540px); margin: auto; padding: 32px 18px; }
header { display: flex; gap: 14px; align-items: center; }
.mark { background: #145646; color: white; border-radius: 16px; padding: 10px 14px; font-size: 24px; font-weight: 800; }
h1, h2 { line-height: 1.15; margin: 6px 0 14px; }
header h1 { margin: 0; }
small { color: #48655b; font-weight: 700; letter-spacing: .06em; }
.card { background: white; padding: 22px; border-radius: 24px; box-shadow: 0 5px 20px #19392b12; }
.example { background: #edf5ed; border-radius: 14px; padding: 12px 16px; }
.example p { margin: 5px 0; }
[lang=en] { font-weight: 650; }
button, input { font: inherit; min-height: 46px; border-radius: 12px; padding: 10px 14px; }
button { cursor: pointer; color: inherit; background: white; border: 1px solid #91aa9f; }
button:focus-visible, input:focus-visible { outline: 3px solid #008562; outline-offset: 2px; }
button:disabled { cursor: default; opacity: .7; }
.primary { background: #145646; color: white; border: 0; width: 100%; font-weight: 700; }
.link { border: 0; padding-left: 0; }
input { display: block; margin: 6px 0 14px; width: 100%; border: 1px solid #91aa9f; }
progress { width: 100%; accent-color: #145646; }
#choices, #levels { display: grid; gap: 8px; }
details { margin-top: 16px; }
summary { cursor: pointer; margin-bottom: 8px; }
#status { min-height: 1.5em; font-size: .9rem; }