*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--f-body); overflow-x:hidden}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0; letter-spacing:-.02em}
:root[lang="ar"] h1,:root[lang="ar"] h2,:root[lang="ar"] h3{letter-spacing:0}
p{margin:0}
a{color:var(--primary)}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
input[type=range]{accent-color:var(--primary); width:100%; height:28px}
.num{font-variant-numeric:tabular-nums}
.avatar-img{border-radius:50%; object-fit:cover; object-position:center 30%; flex:0 0 auto; display:block; background:var(--sand)}
.avatar-img.ring{box-shadow:0 0 0 2px var(--on-primary)}
.who-row{display:flex; align-items:center; gap:14px}
.who-row b{display:block; font-family:var(--f-display); font-size:18px}
.skip{position:fixed; inset-inline-start:16px; top:-60px; z-index:100; padding:12px 16px; border-radius:12px; background:var(--strong); color:var(--on-strong); font-weight:700; text-decoration:none; transition:top .2s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px)); color:var(--on-strong)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:var(--gut)}
@media (max-width:640px){ :root{--gut:16px} body{font-size:16px} }
[dir="rtl"] .flip{transform:scaleX(-1)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-delay:0s!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}