:root {
  --text-color: #333;
  --bg-color: #fff;
  --accent-color: #2c5e2c;
  --spacing: 1rem;
}
@media (prefers-color-scheme: dark) {
  :root { --text-color: #eee; --bg-color: #121212; --accent-color: #6a9c6a; }
}
body { font-family: system-ui, sans-serif; line-height: 1.6; color: var(--text-color); background: var(--bg-color); margin: 0; padding: var(--spacing); }
header, main, footer { max-width: 800px; margin: 0 auto; padding: var(--spacing) 0; }
nav a { padding: 0.5rem; color: var(--accent-color); text-decoration: none; }
h1, h2 { color: var(--accent-color); }
input, button { padding: 0.75rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; }
button { background: var(--accent-color); color: white; border: none; cursor: pointer; }
textarea { width: 100%; height: 100px; margin-top: 1rem; font-family: monospace; }
footer { border-top: 1px solid #ccc; font-size: 0.9rem; }
@media (hover: hover) { nav a:hover { text-decoration: underline; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }