/* Glass blocks: see-through, blurred, with a gradient edge and a soft light that follows the cursor. */
.offer,.num,.step,.role,.jsteps>div,form#brief,form#joinform{position:relative;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 42%,rgba(255,255,255,.04)),rgba(18,18,20,.42);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -30px rgba(0,0,0,.7)}
.offer::before,.num::before,.step::before,.role::before,.jsteps>div::before,form#brief::before,form#joinform::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(140deg,rgba(255,214,170,.7),rgba(255,255,255,.14) 22%,rgba(255,255,255,.04) 55%,rgba(200,116,43,.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .4s}
.offer::after,.num::after,.step::after,.role::after,.jsteps>div::after,form#brief::after,form#joinform::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,214,170,.09),transparent 60%)}
.offer:hover::after,.num:hover::after,.step:hover::after,.role:hover::after,.jsteps>div:hover::after,form#brief:hover::after,form#joinform:hover::after{opacity:1}
/* fields and chips inside */
form#brief input,form#brief textarea,form#brief select,form#joinform input,form#joinform textarea,form#joinform select{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);transition:border-color .3s,background .3s}
form#brief input:focus,form#brief textarea:focus,form#joinform input:focus,form#joinform textarea:focus{border-color:rgba(255,214,170,.55);background:rgba(255,255,255,.055)}
.chip{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)}
.chip:hover{border-color:rgba(255,214,170,.45)}
/* light theme */
html[data-theme="light"] .offer,html[data-theme="light"] .num,html[data-theme="light"] .step,html[data-theme="light"] .role,html[data-theme="light"] .jsteps>div,html[data-theme="light"] form#brief,html[data-theme="light"] form#joinform{
  background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.45) 50%,rgba(255,255,255,.65)),rgba(255,253,249,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 50px -28px rgba(80,50,20,.28)}
html[data-theme="light"] .offer::before,html[data-theme="light"] .num::before,html[data-theme="light"] .step::before,html[data-theme="light"] .role::before,html[data-theme="light"] .jsteps>div::before,html[data-theme="light"] form#brief::before,html[data-theme="light"] form#joinform::before{
  background:linear-gradient(140deg,rgba(200,116,43,.45),rgba(0,0,0,.06) 30%,rgba(0,0,0,.03) 60%,rgba(200,116,43,.25))}
html[data-theme="light"] form#brief input,html[data-theme="light"] form#brief textarea,html[data-theme="light"] form#joinform input,html[data-theme="light"] form#joinform textarea{background:rgba(255,255,255,.6);border-color:rgba(0,0,0,.09)}
html[data-theme="light"] .chip{background:rgba(255,255,255,.5);border-color:rgba(0,0,0,.1)}