* { box-sizing:border-box; }
:root { color-scheme:light; --bg:#f5f5f7; --surface:#fff; --text:#1c1c1e; --muted:#636369; --border:rgba(0,0,0,.1); --hover:#eeeef0; }
html[data-theme="dark"] { color-scheme:dark; --bg:#000; --surface:#1c1c1e; --text:#fff; --muted:#b4b4b4; --border:rgba(255,255,255,.12); --hover:#2c2c2e; }
@media(prefers-color-scheme:dark) { html:not([data-theme="light"]) { color-scheme:dark; --bg:#000; --surface:#1c1c1e; --text:#fff; --muted:#b4b4b4; --border:rgba(255,255,255,.12); --hover:#2c2c2e; } }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { min-height:100svh; display:grid; place-items:center; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
main { width:min(420px,calc(100% - 40px)); margin:60px auto; }
.brand { display:block; width:64px; margin:0 auto 32px; }
.brand img { display:block; width:64px; height:64px; object-fit:contain; }
.brand-dark { display:none!important; }
html[data-theme="dark"] .brand-light { display:none!important; }html[data-theme="dark"] .brand-dark { display:block!important; }
@media(prefers-color-scheme:dark) { html:not([data-theme="light"]) .brand-light { display:none!important; }html:not([data-theme="light"]) .brand-dark { display:block!important; } }
.document { margin:0 0 10px; font-size:13px; font-weight:500; line-height:1.5; color:var(--muted); text-align:center; }
h1 { margin:0 0 32px; font-size:28px; line-height:1.2; letter-spacing:-.7px; font-weight:600; text-align:center; }
.choices { display:grid; gap:12px; }
.country-choice { display:flex; align-items:center; gap:18px; min-height:84px; padding:20px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:20px; font-size:16px; font-weight:600; line-height:1.5; text-decoration:none; transition:background-color .15s; }
.country-choice:hover { background:var(--hover); }.country-choice:focus-visible,.brand:focus-visible { outline:3px solid var(--text); outline-offset:4px; }
.flag { display:flex; align-items:center; width:40px; flex:0 0 40px; }.flag svg { display:block; width:40px; height:28px; border-radius:3px; overflow:hidden; }
@media(prefers-reduced-motion:reduce) { .country-choice { transition:none; } }