:root { --bg:#F7F4EE; --ink:#1D2433; --muted:#5b6472; --brand:#0E7C7B; --line:#E7E2D8; color-scheme: light; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 'Segoe UI', Roboto, Arial, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
header { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
header .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; color:var(--ink); text-decoration:none; }
header nav { margin-left:auto; display:flex; gap:6px; }
header nav button { border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 12px; font-weight:700; cursor:pointer; }
header nav button[aria-pressed="true"] { background:var(--brand); color:#fff; border-color:var(--brand); }
h1 { font-size: 30px; line-height:1.2; margin: 28px 0 8px; }
h2 { font-size: 20px; margin: 28px 0 6px; }
p, li { color: var(--ink); }
.muted { color: var(--muted); font-size: 14px; }
.card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:16px 20px; margin:16px 0; }
a { color: var(--brand); }
[data-lang] { display:none; }
[data-lang].on { display:block; }
input { font:inherit; width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:14px; margin:6px 0 12px; }
button.primary { font:inherit; font-weight:700; background:var(--brand); color:#fff; border:0; border-radius:14px; padding:12px 18px; cursor:pointer; }
footer { margin-top:40px; font-size:13px; color:var(--muted); }