html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none; }

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

body {
  line-height: 1; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.45;
  font-size: 1rem;
  color: #ece2c6;
  background-color: #1b1d27; }

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  padding: 0.1em;
  background-color: #252836; }

pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  background-color: #111218;
  padding: 1rem;
  counter-reset: line;
  overflow-x: auto; }
  pre code {
    padding: 0;
    background-color: transparent; }

p {
  margin: 0 0 1.3em 0;
  display: block; }

i,
em {
  font-style: italic; }

b,
strong {
  font-weight: 700; }

mark {
  background-color: #303345; }

h1 {
  margin: 1.414rem 0 0.5em 0;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.45;
  font-size: 1rem;
  color: #ece2c6;
  font-size: 3.998rem;
  line-height: 1.2;
  color: #f9f5ec;
  font-weight: 100; }

h2 {
  margin: 1.414rem 0 0.5em 0;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.45;
  font-size: 1rem;
  color: #ece2c6;
  font-size: 3.998rem;
  line-height: 1.2;
  color: #f9f5ec;
  font-weight: 100;
  font-size: 2.827rem; }

h3 {
  margin: 1.414rem 0 0.5em 0;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.45;
  font-size: 1rem;
  color: #ece2c6;
  font-size: 3.998rem;
  line-height: 1.2;
  color: #f9f5ec;
  font-weight: 100;
  font-size: 2.827rem;
  font-size: 1.999rem; }

h4 {
  margin: 1.414rem 0 0.5em 0;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.45;
  font-size: 1rem;
  color: #ece2c6;
  font-size: 3.998rem;
  line-height: 1.2;
  color: #f9f5ec;
  font-weight: 100;
  font-size: 2.827rem;
  font-size: 1.999rem;
  font-size: 1.414rem; }

h5 {
  margin: 1.414rem 0 0.5em 0;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.45;
  font-size: 1rem;
  color: #ece2c6;
  font-size: 3.998rem;
  line-height: 1.2;
  color: #f9f5ec;
  font-weight: 100;
  font-size: 2.827rem;
  font-size: 1.999rem;
  font-size: 1.414rem;
  font-size: 1.2rem; }

h6 {
  margin: 1.414rem 0 0.5em 0;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.45;
  font-size: 1rem;
  color: #ece2c6;
  font-size: 3.998rem;
  line-height: 1.2;
  color: #f9f5ec;
  font-weight: 100;
  font-size: 2.827rem;
  font-size: 1.999rem;
  font-size: 1.414rem;
  font-size: 1.2rem; }

a,
a:link,
a:hover,
a:visited,
a:active {
  color: #4da0cf;
  text-decoration: underline; }

ul,
ol {
  margin: 0 0 1.3em 0;
  display: block;
  padding-left: 1.4em; }
  ul li,
  ol li {
    margin-bottom: 0.5rem; }
  ul ul,
  ul ol,
  ol ul,
  ol ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem; }

dl {
  margin: 0 0 1.3em 0;
  display: block;
  padding-left: 1.4em; }
  dl dd {
    padding-left: 1.4em; }
  dl dt {
    font-style: italic; }

ul {
  list-style-type: disc; }
  ul ul {
    list-style-type: circle; }
    ul ul ul {
      list-style-type: square; }

ol {
  list-style-type: decimal; }
  ol ol {
    list-style-type: lower-roman; }
    ol ol ol {
      list-style-type: lower-alpha; }

blockquote,
q {
  margin: 0 0 1.3em 0;
  display: block;
  font-size: 1.414rem;
  color: #f9f5ec;
  padding: 3rem;
  text-align: center;
  display: inline-block;
  position: relative;
  font-style: italic; }
  blockquote:before,
  q:before {
    content: " ";
    border-top: 3px solid #4d51cf;
    position: absolute;
    top: 0;
    width: 50%;
    height: 1px;
    left: 25%; }
  blockquote:after,
  q:after {
    content: " ";
    border-top: 3px solid #4d51cf;
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 1px;
    left: 25%; }

table {
  width: 100%;
  border-collapse: collapse; }

#page {
  justify-content: center;
  padding: 0 0.75rem;
  grid-gap: 0.75rem;
  display: grid;
  grid-template-areas: "header" "content" "sidebar";
  grid-template-columns: minmax(0%, 1fr); }

.l-sidebar-above {
  grid-template-areas: "header" "sidebar" "content"; }

#header {
  width: 100%;
  grid-area: header;
  background-color: #252836; }

#content {
  grid-area: content; }

#sidebar {
  border-style: solid;
  border-color: #303345;
  grid-area: sidebar;
  align-self: start; }

@media screen and (min-width: 1024px) {
  #page {
    padding: 0 3rem 3rem 3rem;
    grid-gap: 3rem; }
  #page, .l-content-left#page {
    grid-template-columns: minmax(0%, 860px) 300px;
    grid-template-areas: "header header" "content sidebar"; }
  #sidebar, .l-content-left #sidebar {
    border-width: 0 0 0 1px;
    padding: 0 0 0 3rem; }
  .l-content-right#page {
    grid-template-columns: 300px minmax(0%, 860px);
    grid-template-areas: "header header" "sidebar content"; }
  .l-content-right #sidebar {
    border-width: 0 1px 0 0;
    padding: 0 3rem 0 0; } }

.button {
  display: inline-block;
  border-bottom: 3px solid #3187b8;
  padding: 5px 7px;
  background-color: #75b5da;
  color: #1b1d27; }
  .button:focus {
    outline: none; }
  .button:hover {
    background-color: #3187b8;
    border-bottom: 3px solid #75b5da; }
  .button:active {
    border-bottom: none;
    margin-top: 3px; }
  .button.is-full-width {
    display: block;
    width: 100%; }
  .button--primary {
    border-color: #3187b8;
    background-color: #75b5da;
    color: #1b1d27; }
    .button--primary:hover {
      border-bottom-color: #75b5da;
      background-color: #3187b8; }
  .button--inverted {
    border-color: #dfcfa0;
    background-color: #f9f5ec;
    color: #1b1d27; }
    .button--inverted:hover {
      border-bottom-color: #f9f5ec;
      background-color: #dfcfa0; }
  .button--success {
    border-color: #31b847;
    background-color: #75da85;
    color: #1b1d27; }
    .button--success:hover {
      border-bottom-color: #75da85;
      background-color: #31b847; }
  .button--danger {
    border-color: #b83151;
    background-color: #da758d;
    color: #1b1d27; }
    .button--danger:hover {
      border-bottom-color: #da758d;
      background-color: #b83151; }
  .button--warning {
    border-color: #b8b331;
    background-color: #dad675;
    color: #1b1d27; }
    .button--warning:hover {
      border-bottom-color: #dad675;
      background-color: #b8b331; }

.card {
  background-color: #252836;
  padding: 1rem; }

.code-block {
  margin: 0 0 1.3em 0;
  display: block;
  padding: 1rem;
  counter-reset: line; }
  .code-block--line-number:before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    margin-right: 1rem;
    padding-right: 0.5rem;
    opacity: 0.5; }

.demo {
  margin: 0 0 1.3em 0;
  display: block;
  background-color: #252836;
  position: relative; }
  .demo--preview {
    padding: 1rem;
    margin: 0;
    flex: 1 0 auto; }
  .demo--code {
    color: #ece2c6;
    border-radius: 0;
    margin: 0;
    flex: 1 0 auto; }
  .demo--button {
    display: block;
    position: absolute;
    right: 3px;
    bottom: 3px; }
  .demo.is-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch; }
  .demo.is-default-color {
    background-color: #1b1d27;
    color: #ece2c6;
    border: 1px solid #303345; }

.header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center; }
  .header--name {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    line-height: 1.45;
    font-size: 1rem;
    color: #ece2c6;
    font-size: 3.998rem;
    line-height: 1.2;
    color: #f9f5ec;
    font-weight: 100;
    font-size: 2.827rem;
    font-size: 1.999rem;
    font-size: 1.414rem;
    padding: 1rem;
    flex: 1 0 auto;
    margin: 0; }
  .header--nav {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0; }
  .header--nav-link {
    padding: 1rem;
    margin: 0; }

.jump-list {
  margin: 0 0 1.3em 0;
  display: block; }
  .jump-list--heading {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    line-height: 1.45;
    font-size: 1rem;
    color: #ece2c6;
    font-size: 3.998rem;
    line-height: 1.2;
    color: #f9f5ec;
    font-weight: 100;
    font-size: 2.827rem;
    font-size: 1.999rem;
    margin: 1.414rem 0 0.5em 0;
    display: block; }
  .jump-list ul {
    list-style-type: none;
    padding-left: 0; }
  .jump-list li > ul {
    padding-left: 1rem; }
  .jump-list ul a,
  .jump-list ul a:link,
  .jump-list ul a:hover,
  .jump-list ul a:visited,
  .jump-list ul a:active {
    color: #75b5da; }
  .jump-list ul ul a,
  .jump-list ul ul a:link,
  .jump-list ul ul a:hover,
  .jump-list ul ul a:visited,
  .jump-list ul ul a:active {
    color: #4da0cf; }
  .jump-list ul ul ul a,
  .jump-list ul ul ul a:link,
  .jump-list ul ul ul a:hover,
  .jump-list ul ul ul a:visited,
  .jump-list ul ul ul a:active {
    color: #3187b8; }

.log {
  margin: 1em 1em 1em 2em;
  border-left: 3px solid #252836;
  padding: 1em 0; }
  .log--row {
    margin-left: -1em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 2em; }
    .log--row:last-child {
      margin-bottom: 0; }
  .log--icon {
    flex: 0 0 auto;
    order: 0;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    text-align: center;
    background-color: #303345;
    margin-right: 1em;
    display: flex;
    justify-content: center;
    align-items: center; }
  .log--content {
    flex: 1 1 auto;
    order: 1; }
  .log--heading {
    font-weight: 100;
    display: block;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #252836;
    margin-bottom: 0.2em; }
  .log--aside {
    flex: 0 0 auto;
    order: 2;
    display: block;
    margin-left: 1em; }
  .log .is-primary {
    background-color: #75b5da;
    color: #060709; }
  .log .is-inverted {
    background-color: #f9f5ec;
    color: #060709; }
  .log .is-success {
    background-color: #75da85;
    color: #060709; }
  .log .is-danger {
    background-color: #da758d;
    color: #060709; }
  .log .is-warning {
    background-color: #dad675;
    color: #060709; }

.section {
  border-bottom: 1px solid #252836; }
  .section:last-child {
    border-bottom: 0; }

.split-columns {
  display: flex; }
  .split-columns > * {
    flex: 1 0 0;
    margin: 0 0.5rem; }
    .split-columns > *:first-child {
      margin: 0 0.5rem 0 0; }
    .split-columns > *:last-child {
      margin: 0 0 0 0.5rem; }

.table {
  margin: 0 0 1.3em 0;
  display: block;
  display: table; }
  .table--heading {
    font-weight: 700;
    border-bottom: 2px solid #303345;
    padding: 0.5rem;
    color: #e6d8b3;
    text-align: left; }
  .table--cell {
    border-bottom: 1px solid #303345;
    padding: 0.5rem; }
  .table--fill {
    padding: 0;
    height: 1px;
    vertical-align: top; }
    .table--fill > * {
      margin: 0;
      min-height: 100%; }

.title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.45;
  font-size: 1rem;
  color: #ece2c6;
  font-size: 3.998rem;
  line-height: 1.2;
  color: #f9f5ec;
  font-weight: 100;
  margin: 1.414rem 0 0.5em 0;
  display: block;
  border-bottom: 1px solid #252836;
  margin-top: 0; }
  .title:last-child {
    border-bottom: 0; }
  .title--heading {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    line-height: 1.45;
    font-size: 1rem;
    color: #ece2c6;
    font-size: 3.998rem;
    line-height: 1.2;
    color: #f9f5ec;
    font-weight: 100;
    margin: 0; }
  .title--subheading {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    line-height: 1.45;
    font-size: 1rem;
    color: #ece2c6;
    font-size: 3.998rem;
    line-height: 1.2;
    color: #f9f5ec;
    font-weight: 100;
    font-size: 2.827rem;
    font-size: 1.999rem;
    font-size: 1.414rem;
    margin: 0 0 1.3em 0;
    display: block;
    font-weight: 700;
    color: #3187b8; }

.is-close {
  margin: 0;
  padding: 0; }

.is-dark {
  background-color: #252836;
  color: #ece2c6; }

.is-inverted {
  background-color: #ece2c6;
  color: #1b1d27; }

.is-light {
  background-color: #f2ecd9;
  color: #1b1d27; }

.is-rounded {
  border-radius: 0.5rem; }

.is-syntax-yellow {
  color: #cfcb4d; }

.is-syntax-lime {
  color: #86cf4d; }

.is-syntax-green {
  color: #4dcf62; }

.is-syntax-aqua {
  color: #4dcfb0; }

.is-syntax-azure {
  color: #4da0cf; }

.is-syntax-blue {
  color: #4d51cf; }

.is-syntax-violet {
  color: #964dcf; }

.is-syntax-magenta {
  color: #cf4dba; }

.is-syntax-red {
  color: #cf4d6c; }

.is-syntax-orange {
  color: #cf7c4d; }

.is-syntax-light {
  color: #303345; }