:root{--paper:#f4f6f3;--ink:#14232b;--muted:#4d5f66;--line:#cfd8d6;--accent:#2438b5;--gold:#c98a00}
*{box-sizing:border-box}
html{scroll-padding-top:1rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.9 "Readex Pro","Segoe UI",Tahoma,Arial,sans-serif}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
header,main,footer{max-width:46rem;margin-inline:auto;padding-inline:1.25rem}
header{display:flex;justify-content:space-between;align-items:baseline;padding-block:1.5rem;border-bottom:1px solid var(--line)}
.brand{font-weight:600;font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:.01em}
nav a{margin-inline-start:1.25rem;font-size:.95rem}
h1{font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.35;margin:2.5rem 0 1rem;font-weight:600}
h2{font-size:1.35rem;margin:2.5rem 0 .5rem;font-weight:600}
p{margin:.5rem 0 1rem;max-width:62ch}
.lead{font-size:1.2rem;color:var(--muted)}
.loop{display:flex;align-items:center;margin:2.5rem 0;padding:0;list-style:none;direction:rtl}
.loop li{flex:0 0 auto;font-weight:600;padding:.35rem .9rem;border:2px solid var(--ink);border-radius:2rem;background:var(--paper)}
.loop li+li{margin-inline-start:0}
.loop .bar{flex:1 1 1rem;height:2px;background:var(--ink);padding:0;border:0;border-radius:0;min-width:.75rem}
.loop .win{border-color:var(--gold);background:var(--gold);color:#fff}
dl{margin:1rem 0}dt{font-weight:600;margin-top:1.25rem}dd{margin:.25rem 0 0;max-width:62ch;color:var(--muted)}
section[lang=en]{margin-top:3.5rem;padding-top:2rem;border-top:2px solid var(--ink)}
ul{padding-inline-start:1.4rem;max-width:62ch}li{margin:.35rem 0}
footer{margin-top:4rem;padding-block:1.5rem 3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
footer a{margin-inline-end:1rem}
@media (max-width:30rem){.loop{flex-wrap:wrap;row-gap:.5rem}.loop .bar{display:none}.loop li{margin-inline-end:.5rem}}