*,*::after,*::before{
  -webkit-tap-highlight-color:rgba(0,0,0,0)!important;
  -webkit-tap-highlight-color:transparent!important;
  box-sizing:border-box!important;}

a{
  color:var(--ui-color-white);}

iframe{border:none;}
pre{margin:0;}

code{
  font-family:var(--ui-font-family-ui-monospace);
  letter-spacing:1px;}

h1,h2,h3,h4,h5,h6{
  margin:0;}

html,
body{
  position:relative;
  margin:0;
  padding:0;
  width:100%;
  height:100%;}

body{
  font-family:var(--ui-font-family);
  font-size:var(--ui-font-size-large);
  color:var(--ui-color-white);
  background-color:var(--ui-color-black);
  overflow-y:scroll;}

::-webkit-scrollbar{
  width:8px;
  height:8px;}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track{
  cursor:default;}

::-webkit-scrollbar-thumb{
  border-radius:var(--ui-border-radius-pill);
  background-color:var(--ui-color-scrollbar);}

::-webkit-scrollbar-track{
  background-color:transparent;}

::-webkit-scrollbar-button{
  display:none;}

#app{
  position:relative;
  display:flex;
  width:1600px;
  max-width:100%;
  margin:auto;}

nav{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:220px;
  row-gap:1px;
  padding:0 10px}

nav .dynamic{
  display:flex;
  flex-direction:column;
  row-gap:20px;}

nav .static{
  display:flex;
  align-items:center;
  height:60px;
  min-height:60px;}

nav .ui-version{
  color:var(--ui-color-gray-200);
  font-size:var(--ui-font-size-small);}

nav .menuTitle{
  padding-bottom:6px;
  font-size:var(--ui-font-size-large);}

nav .menuItem{
  display:block;
  cursor:pointer;
  font-size:var(--ui-font-size-medium);
  color:var(--ui-color-gray-200);}

nav .menuItem span{
  display:flex;
  align-items:center;
  column-gap:10px;
  padding:5px 10px;
  font-size:100%;
  border-radius:var(--ui-border-radius-rounded);
  transition-duration:var(--ui-transition-duration);
  transition-property:background-color,color;}

@media (hover:hover){
nav .menuItem span:hover{
  color:var(--ui-color-white);
  background-color:var(--ui-color-gray-850);}
}

nav .menuItem span.active{
  color:var(--ui-color-white);
  background-color:var(--ui-color-gray-800);}

article{
  display:flex;
  flex-direction:column;
  row-gap:50px;
  padding:60px 10px;
  flex-grow:1;}



/* intro */
.intro{
  display:flex;
  flex-direction:column;
  row-gap:30px;
  line-height:var(--ui-line-height-150);}

.intro > h1{
  line-height:1;
  color:var(--ui-color-white);
  font-size:var(--ui-h1-size);}

.intro > .description{
  color:var(--ui-color-gray-200);}

.intro > .info{
  display:flex;
  flex-direction:column;
  row-gap:20px;}

.intro > .info > h2{
  font-size:var(--ui-h2-size);}

.intro > .info > ul{
  display:flex;
  flex-direction:column;
  row-gap:16px;
  margin:0;}

.intro > .info > ul ul{
  display:flex;
  flex-direction:column;
  row-gap:8px;
  margin:10px 5px;}



/* content */
.content,
.content > .content-item{
  display:flex;
  flex-direction:column;}

.content{
  row-gap:50px;}

.content > .content-item{
  row-gap:10px;}

.content-item > .example{
  overflow:hidden;
  border:1px solid var(--ui-color-gray-750);
  border-radius:var(--ui-border-radius-rounded);}

.content-item > .example > .preview,
.content-item > .example > .code,
.content-item > .example > .toolbar{
  position:relative;
  max-width:100%;}

.content-item > .example > .preview{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;}

.content-item > .example > .preview,
.content-item > .example > .code{
  padding:25px 15px;}

.content-item > .example > .code{
  line-height:var(--ui-line-height-150);
  background-color:var(--ui-color-gray-850);}

.content-item > .example > .preview,
.content-item > .example > .toolbar{
  border-bottom:1px solid var(--ui-color-gray-750);}

.content-item > .example > .toolbar{
  display:flex;
  align-items:center;
  padding:10px 15px;
  font-size:var(--ui-font-size-small);
  gap:10px;}



/* icons */
.content-item > .icons{
  display:inline-flex;
  gap:20px;
  border:none;
  flex-wrap:wrap;
  padding:0;}

.content-item > .icons > .icon-card{
  display:flex;
  min-width:140px;
  row-gap:12px;
  flex-direction:column;
  align-items:center;
  padding:12px 10px 10px;
  border-width:1px;
  border-style:solid;
  border-color:var(--ui-color-gray-750);
  border-radius:var(--ui-border-radius-rounded);
  line-height:1;}

.content-item > .icons > .icon-card > .icon-name{
  color:var(--ui-color-gray-250);
  font-size:var(--ui-font-size-small);}