*{box-sizing:border-box;}
html,body{min-height:100%;}
html{ background: var(--bg); }
body{
  margin:0;
  font-family: var(--font-sans);
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  background: var(--page-gradient);
  color:var(--text);
  line-height: var(--leading-body);
}

a{color:var(--link); text-decoration:none; transition: color .2s var(--ease-out);}
a:hover{ text-decoration:underline; }
button, input, select, textarea{
  font: inherit;
  color: inherit;
}
button, input, select, textarea, a{
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out),
    background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

kbd{
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--chip);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
}