:root { --primary: #0E7C66; --on-primary: #fff; --bg: #F6F7F5; --surface: #fff; --text: #1B1D1C; --muted: #5F6661; --container: #CDEFE6;
  --outline: #DDE2DF; }
@media (prefers-color-scheme: dark) {
  :root { --primary: #4FD1B0; --on-primary: #00382D; --bg: #101413; --surface: #1A1F1D; --text: #E6EAE8; --muted: #A5ADA9; --container: #0D4A3E;
    --outline: #2C3431; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--bg); color: var(--text);
  font-family: Rubik, "Segoe UI", Arial, sans-serif; }
.card { width: 100%; max-width: 420px; background: var(--surface); border-radius: 16px; padding: 28px 24px; text-align: center; }
.emoji { font-size: 56px; }
h1 { margin: 8px 0; font-size: 26px; }
p { margin: 8px 0; line-height: 1.5; }
a { color: var(--primary); }
.muted { color: var(--muted); font-size: 14px; }
.code { direction: ltr; font-size: 40px; font-weight: 700; letter-spacing: 6px; color: var(--primary); margin: 8px 0; }
.button { display: block; width: 100%; margin: 12px 0 0; padding: 14px; border-radius: 12px; border: 0; font: inherit; font-weight: 600;
  font-size: 17px; text-decoration: none; cursor: pointer; text-align: center; }
.primary { background: var(--primary); color: var(--on-primary); }
.secondary { background: var(--container); color: var(--text); }
.hidden { display: none; }

/* Long pages (home, privacy, terms, account deletion): a readable column instead of a centered card. */
body.page { display: block; padding: 0; }
.wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.top { display: flex; align-items: center; gap: 10px; padding: 8px 0 16px; text-decoration: none; color: var(--text); font-weight: 700;
  font-size: 20px; }
.top img { width: 36px; height: 36px; }
.doc { background: var(--surface); border-radius: 16px; padding: 24px 20px; }
.doc h1 { font-size: 28px; margin-top: 0; }
.doc h2 { font-size: 20px; margin: 28px 0 8px; }
.doc h3 { font-size: 17px; margin: 18px 0 6px; }
.doc ul, .doc ol { padding-inline-start: 22px; line-height: 1.6; }
.doc li { margin: 4px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 15px; }
.doc th, .doc td { text-align: start; padding: 8px; border-bottom: 1px solid var(--outline); vertical-align: top; }
.doc .lang { margin-top: 40px; padding-top: 24px; border-top: 2px solid var(--outline); }
footer { color: var(--muted); font-size: 14px; text-align: center; padding: 24px 0 0; line-height: 1.8; }
footer a { color: var(--muted); }

/* Home page */
.hero { text-align: center; padding: 24px 0 8px; }
.hero img { width: 88px; height: 88px; }
.hero h1 { font-size: 34px; margin: 12px 0 4px; }
.hero .tagline { font-size: 19px; color: var(--muted); margin: 0 auto 20px; max-width: 520px; }
.store { display: inline-block; padding: 14px 22px; border-radius: 12px; background: var(--primary); color: var(--on-primary);
  font-weight: 600; text-decoration: none; }
.store.soon { background: var(--container); color: var(--text); cursor: default; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 28px 0; }
.feature { background: var(--surface); border-radius: 16px; padding: 20px; }
.feature .emoji { font-size: 36px; }
.feature h2 { font-size: 18px; margin: 8px 0 4px; }
.feature p { color: var(--muted); margin: 0; }
.steps { background: var(--surface); border-radius: 16px; padding: 20px; }
.steps h2 { font-size: 20px; margin: 0 0 8px; }
.steps ol { padding-inline-start: 22px; line-height: 1.7; margin: 0; }
.english { margin-top: 28px; }