:root {
  --emerald: #0F4C3A; --gold: #C9A227; --parchment: #FAF6EC;
  --paper: #FFFCF5; --ink: #1F2A24; --muted: #55615A;
}
@media (prefers-color-scheme: dark) {
  :root { --emerald: #4FA587; --parchment: #0B1F1A; --paper: #12302A; --ink: #F3EBD8; --muted: #BFB8A6; }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--parchment); color: var(--ink);
  font-family: "Tajawal", "Noto Naskh Arabic", system-ui, sans-serif;
  line-height: 1.6;
}
main {
  flex: 1; width: 100%; max-width: 30rem; margin: 0 auto;
  padding: 2.5rem 1rem; text-align: center;
}
.cartouche {
  border: 1.5px solid var(--gold); outline: 0.7px solid var(--gold); outline-offset: -6px;
  border-radius: 2rem; background: var(--paper); padding: 0.75rem 1.5rem; margin-bottom: 1.5rem;
}
h1 { font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: 1.75rem; margin: 0; font-weight: 700; }
.progress p { font-size: 1.25rem; font-weight: 700; color: var(--emerald); margin: 0.5rem 0 0; }
.bar { height: 0.75rem; border: 1px solid var(--gold); border-radius: 1rem; overflow: hidden; background: var(--paper); }
.bar span { display: block; height: 100%; background: var(--emerald); }
.lead { font-size: 1.15rem; margin: 1.5rem 0; }
.btn {
  display: block; padding: 0.95rem 1rem; margin: 0.75rem 0; border-radius: 0.9rem;
  background: var(--emerald); color: var(--parchment); text-decoration: none;
  font-weight: 700; font-size: 1.1rem; border: 1px solid var(--gold);
}
.btn.alt { background: transparent; color: var(--emerald); }
.code { color: var(--muted); font-size: 0.95rem; }
footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 1rem; }