.craft-button {
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  color: #FFFFFF;
}

.craft-button--disabled {
  cursor: 'not-allowed';
}

.craft-button--small {
  font-size: 12px;
  padding: 10px 16px;
}

.craft-button--medium {
  font-size: 14px;
  padding: 11px 20px;
}

.craft-button--large {
  font-size: 16px;
  padding: 12px 24px;
}

:root {
    /* primary button */
    --primary-color: #0654c1;
    --primary-solid--normal: #2D84FC;
    --primary-solid--hover: #52A3FF;
    --primary-solid--click: #0B64E0;
    --primary-solid--disabled: #AACFFA;

    --primary-plain--normal: #FFFFFF;
    --primary-plain--hover: #EDF5FF;
    --primary-plain--click: #D7E8FC;
    --primary-plain--disabled: #EDF5FF;

    --primary-text--normal: #2D84FC;
    --primary-text--hover: #52A3FF;
    --primary-text--click: #0B64E0;
    --primary-text--disabled: #AACFFA;

    /* success button */
    --success-color: #0B7350;

    --success-solid--normal: #1EA87A;
    --success-solid--hover: #43BF96;
    --success-solid--click: #14855F;
    --success-solid--disabled: #9CE6CD;

    --success-plain--normal: #FFFFFF;
    --success-plain--hover: #E8F8F2;
    --success-plain--click: #D3F2E8;
    --success-plain--disabled: #E8F8F2;

    --success-text--normal: #1EA87A;
    --success-text--hover: #43BF96;
    --success-text--click: #14855F;
    --success-text--disabled: #9CE6CD;

    /* warning button */
    --warning-color: #A64208;

    --warning-solid--normal: #FF7B2E;
    --warning-solid--hover: #FF9152;
    --warning-solid--click: #E05E12;
    --warning-solid--disabled: #FFBE99;

    --warning-plain--normal: #FFFFFF;
    --warning-plain--hover: #FFF4ED;
    --warning-plain--click: #FFE2D1;
    --warning-plain--disabled: #FFF4ED;

    --warning-text--normal: #FF7B2E;
    --warning-text--hover: #FF9152;
    --warning-text--click: #E05E12;
    --warning-text--disabled: #FFBE99;

    /* danger button */
    --danger-color: #AD131D;

    --danger-solid--normal: #FA4652;
    --danger-solid--hover: #FA646E;
    --danger-solid--click: #D12E39;
    --danger-solid--disabled: #FAAAAF;

    --danger-plain--normal: #FFFFFF;
    --danger-plain--hover: #FFEDEE;
    --danger-plain--click: #FCDCDE;
    --danger-plain--disabled: #FFEDEE;

    --danger-text--normal: #FA4652;
    --danger-text--hover: #FA646E;
    --danger-text--click: #D12E39;
    --danger-text--disabled: #FAAAAF;

    /* info button */
    --info-color: #292B2E;

    --info-solid--normal: #B8C0CC;
    --info-solid--hover: #7D8999;
    --info-solid--click: #515861;
    --info-solid--disabled: #DCE0E6;

    --info-plain--normal: #FFFFFF;
    --info-plain--hover: #FAFBFC;
    --info-plain--click: #F2F5FA;
    --info-plain--disabled: #FFFFFF;

    --info-text--normal: #1F2226;
    --info-text--hover: #292B2E;
    --info-text--click: #0E0E0F;
    --info-text--disabled: #B8C0CC;
}

/**************** primary *******************/
/* 面性 */
.craft-button--default__primary {
    background-color: var(--primary-solid--normal);
}

.craft-button--default__primary:hover {
    background-color: var(--primary-solid--hover);
}

.craft-button--default__primary:active {
    background-color: var(--primary-solid--click);
}

.craft-button--default__primary__disabled {
    background-color: var(--primary-solid--disabled);
}

/* 线性 */
.craft-button--plain__primary {
    background-color: var(--primary-plain--normal);
    color: var(--primary-text--normal);
    box-shadow: var(--primary-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__primary:hover {
    background-color: var(--primary-plain--hover);
    color: var(--primary-text--hover);
    box-shadow: var(--primary-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__primary:active {
    background-color: var(--primary-plain--click);
    color: var(--primary-text--click);
    box-shadow: var(--primary-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__primary__disabled {
    background-color: var(--primary-plain--disabled);
    color: var(--primary-text--disabled);
    box-shadow: var(--primary-text--disabled) 0px 0px 0px 1px inset;
}

/**************** warning *******************/
/* 面性 */
.craft-button--default__warning {
    background-color: var(--warning-solid--normal);
}

.craft-button--default__warning:hover {
    background-color: var(--warning-solid--hover);
}

.craft-button--default__warning:active {
    background-color: var(--warning-solid--click);
}

.craft-button--default__warning__disabled {
    background-color: var(--warning-solid--disabled);
}

/* 线性 */
.craft-button--plain__warning {
    background-color: var(--warning-plain--normal);
    color: var(--warning-text--normal);
    box-shadow: var(--warning-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__warning:hover {
    background-color: var(--warning-plain--hover);
    color: var(--warning-text--hover);
    box-shadow: var(--warning-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__warning:active {
    background-color: var(--warning-plain--click);
    color: var(--warning-text--click);
    box-shadow: var(--warning-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__warning__disabled {
    background-color: var(--warning-plain--disabled);
    color: var(--warning-text--disabled);
    box-shadow: var(--warning-text--disabled) 0px 0px 0px 1px inset;
}

/**************** danger *******************/
/* 面性 */
.craft-button--default__danger {
    background-color: var(--danger-solid--normal);
}

.craft-button--default__danger:hover {
    background-color: var(--danger-solid--hover);
}

.craft-button--default__danger:active {
    background-color: var(--danger-solid--click);
}

.craft-button--default__danger__disabled {
    background-color: var(--danger-solid--disabled);
}

/* 线性 */
.craft-button--plain__danger {
    background-color: var(--danger-plain--normal);
    color: var(--danger-text--normal);
    box-shadow: var(--danger-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__danger:hover {
    background-color: var(--danger-plain--hover);
    color: var(--danger-text--hover);
    box-shadow: var(--danger-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__danger:active {
    background-color: var(--danger-plain--click);
    color: var(--danger-text--click);
    box-shadow: var(--danger-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__danger__disabled {
    background-color: var(--danger-plain--disabled);
    color: var(--danger-text--disabled);
    box-shadow: var(--danger-text--disabled) 0px 0px 0px 1px inset;
}

/**************** success *******************/
/* 面性 */
.craft-button--default__success {
    background-color: var(--success-solid--normal);
}

.craft-button--default__success:hover {
    background-color: var(--success-solid--hover);
}

.craft-button--default__success:active {
    background-color: var(--success-solid--click);
}

.craft-button--default__success__disabled {
    background-color: var(--success-solid--disabled);
}

/* 线性 */
.craft-button--plain__success {
    background-color: var(--success-plain--normal);
    color: var(--success-text--normal);
    box-shadow: var(--success-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__success:hover {
    background-color: var(--success-plain--hover);
    color: var(--success-text--hover);
    box-shadow: var(--success-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__success:active {
    background-color: var(--success-plain--click);
    color: var(--success-text--click);
    box-shadow: var(--success-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__success__disabled {
    background-color: var(--success-plain--disabled);
    color: var(--success-text--disabled);
    box-shadow: var(--success-text--disabled) 0px 0px 0px 1px inset;
}

/**************** info *******************/
/* 面性 */
.craft-button--default__info {
    background-color: var(--info-solid--normal);
}

.craft-button--default__info:hover {
    background-color: var(--info-solid--hover);
}

.craft-button--default__info:active {
    background-color: var(--info-solid--click);
}

.craft-button--default__info__disabled {
    background-color: var(--info-solid--disabled);
}

/* 线性 */
.craft-button--plain__info {
    background-color: var(--info-plain--normal);
    color: var(--info-text--normal);
    box-shadow: var(--info-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__info:hover {
    background-color: var(--info-plain--hover);
    color: var(--info-text--hover);
    box-shadow: var(--info-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__info:active {
    background-color: var(--info-plain--click);
    color: var(--info-text--click);
    box-shadow: var(--info-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__info__disabled {
    background-color: var(--info-plain--disabled);
    color: var(--info-text--disabled);
    box-shadow: var(--info-text--disabled) 0px 0px 0px 1px inset;
}

/**************** 文字按钮 *******************/
/* primary */
.craft-text__primary {
    color: var(--primary-text--normal);
}
.craft-text__primary:hover {
    color: var(--primary-text--hover);
}
.craft-text__primary:active {
    color: var(--primary-text--click);
}
.craft-text__primary__disabled {
    color: var(--primary-text--disabled);
}

/* success */
.craft-text__success {
    color: var(--success-text--normal);
}
.craft-text__success:hover {
    color: var(--success-text--hover);
}
.craft-text__success:active {
    color: var(--success-text--click);
}
.craft-text__success__disabled {
    color: var(--success-text--disabled);
}
 
/* warning */
.craft-text__warning {
    color: var(--warning-text--normal);
}
.craft-text__warning:hover {
    color: var(--warning-text--hover);
}
.craft-text__warning:active {
    color: var(--warning-text--click);
}
.craft-text__warning__disabled {
    color: var(--warning-text--disabled);
}

/* danger */
.craft-text__danger {
    color: var(--danger-text--normal);
}
.craft-text__danger:hover {
    color: var(--danger-text--hover);
}
.craft-text__danger:active {
    color: var(--danger-text--click);
}
.craft-text__danger__disabled {
    color: var(--danger-text--disabled);
}

/* info */
.craft-text__info {
    color: var(--info-text--normal);
}
.craft-text__info:hover {
    color: var(--info-text--hover);
}
.craft-text__info:active {
    color: var(--info-text--click);
}
.craft-text__info__disabled {
    color: var(--info-text--disabled);
}
.wrapper {
    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  svg {
    display: inline-block;
    vertical-align: top;
  }
  
  h1 {
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
    margin: 6px 0 6px 10px;
    display: inline-block;
    vertical-align: top;
  }
  
  button + button {
    margin-left: 10px;
  }
  
  .welcome {
    color: #333;
    font-size: 14px;
    margin-right: 10px;
  }
  
section {
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
  padding: 48px 20px;
  margin: 0 auto;
  max-width: 600px;
  color: #333;
}

section h2 {
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  margin: 0 0 4px;
  display: inline-block;
  vertical-align: top;
}

section p {
  margin: 1em 0;
}

section a {
  text-decoration: none;
  color: #1ea7fd;
}

section ul {
  padding-left: 30px;
  margin: 1em 0;
}

section li {
  margin-bottom: 8px;
}

section .tip {
  display: inline-block;
  border-radius: 1em;
  font-size: 11px;
  line-height: 12px;
  font-weight: 700;
  background: #e7fdd8;
  color: #66bf3c;
  padding: 4px 12px;
  margin-right: 10px;
  vertical-align: top;
}

section .tip-wrapper {
  font-size: 13px;
  line-height: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
}

section .tip-wrapper svg {
  display: inline-block;
  height: 12px;
  width: 12px;
  margin-right: 4px;
  vertical-align: top;
  margin-top: 3px;
}

section .tip-wrapper svg path {
  fill: #1ea7fd;
}