body {
  background: #f5f5f5; }

.design-system {
  margin: 1.666rem auto;
  padding-left: 1.666rem;
  padding-right: 1.666rem; }
  .design-system > h1 {
    text-align: center; }

.design-system--size-sm {
  max-width: 45ch; }

.design-system--size-md {
  max-width: 85ch; }

#__next {
  height: auto; }

.design-system-header {
  background: white;
  padding: 0.833rem 1.666rem;
  position: sticky;
  top: 0;
  z-index: 1; }
  .design-system-header ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.4165rem;
    margin-bottom: -0.4165rem;
    padding: 0; }
    .design-system-header ul > * {
      margin: 0 0 0.4165rem 0.4165rem; }

.design-system-header__inner {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: -0.833rem;
  margin-bottom: -0.833rem;
  align-items: center; }
  .design-system-header__inner > * {
    margin: 0 0 0.833rem 0.833rem;
    flex: 9999 1 calc((100% - 100%) * 9999);
    min-width: calc(50% - 0.833rem); }
  .design-system-header__inner > * + * {
    flex: 1 1 auto;
    min-width: 0; }

.design-system-pattern {
  background: white;
  padding: 1.666rem; }
  .design-system-pattern > header:first-child {
    border-bottom: 0.0625rem dotted;
    padding-bottom: 0.833rem; }

.design-system-pattern__header-inner {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: -0.833rem;
  margin-bottom: -0.833rem; }
  .design-system-pattern__header-inner > * {
    margin: 0 0 0.833rem 0.833rem;
    flex: 9999 1 calc((100% - 100%) * 9999);
    min-width: calc(75% - 0.833rem); }
  .design-system-pattern__header-inner > :first-child {
    flex: 1 1 auto;
    min-width: 0; }

.design-system-pattern__component {
  color: #212529;
  font-family: "Courier New", Courier, monospace;
  font-weight: 500;
  max-width: none; }

.design-system-section > h1:first-child,
.design-system-section > h2:first-child,
.design-system-section > h3:first-child,
.design-system-section > h4:first-child,
.design-system-section > h5:first-child,
.design-system-section > h6:first-child {
  position: relative;
  text-align: center; }
  .design-system-section > h1:first-child::before,
  .design-system-section > h2:first-child::before,
  .design-system-section > h3:first-child::before,
  .design-system-section > h4:first-child::before,
  .design-system-section > h5:first-child::before,
  .design-system-section > h6:first-child::before {
    content: "";
    border-top: 0.0625rem solid;
    width: 33.333%;
    position: absolute;
    top: -0.4165rem;
    left: 33.333%; }

* + .design-system-section {
  margin-top: 4.998rem; }

.design-system-block {
  box-sizing: border-box;
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 1em;
  border: 0.5rem solid #231f20; }

.design-system-layout--switcher {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1.666rem;
  margin-bottom: -1.666rem; }
  .design-system-layout--switcher > * {
    flex: 1 1 calc((40rem - 100%) * 999);
    margin: 0;
    margin-left: 1.666rem;
    margin-bottom: 1.666rem; }

.design-system-layout--sidebar {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: -1.666rem;
  margin-bottom: -1.666rem; }
  .design-system-layout--sidebar > * {
    margin: 0 0 1.666rem 1.666rem;
    flex: 9999 1 calc((100% - 100%) * 9999);
    min-width: calc(50% - 1.666rem); }
  .design-system-layout--sidebar > * + * {
    flex: 1 1 15rem;
    min-width: 0; }

.design-system-layout--grid-simple {
  display: flex;
  flex-wrap: wrap;
  display: grid;
  grid-gap: 1.666rem;
  grid-template-columns: repeat(auto-fill, minmax(calc(16% + 5rem), 1fr)); }
  .design-system-layout--grid-simple > * {
    margin: 0;
    margin-right: 1.666rem;
    margin-bottom: 1.666rem;
    max-width: 100%;
    width: 18rem; }
    @supports (display: grid) {
      .design-system-layout--grid-simple > * {
        margin-right: 0;
        margin-bottom: 0;
        width: auto; } }

.design-system-layout--grid-fit {
  display: flex;
  flex-wrap: wrap;
  display: grid;
  grid-gap: 1.666rem 1.666rem;
  grid-template-columns: repeat(auto-fit, minmax(calc(16% + 5rem), 1fr)); }
  .design-system-layout--grid-fit > * {
    margin: 0;
    margin-right: 1.666rem;
    margin-bottom: 1.666rem;
    max-width: 100%;
    width: 18rem; }
    @supports (display: grid) {
      .design-system-layout--grid-fit > * {
        margin: 0;
        width: auto; } }

.design-system-layout--center {
  display: flex;
  flex-direction: column; }
  .design-system-layout--center > * {
    box-sizing: content-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 70ch;
    padding: 1.666rem; }

.design-system-layout--cover {
  box-sizing: border-box;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: 1.666rem; }
  .design-system-layout--cover > * {
    width: 100%; }
  .design-system-layout--cover > :first-child:not(.design-system-layout__main) {
    margin-bottom: 1.666rem; }
  .design-system-layout--cover > :last-child:not(.design-system-layout__main) {
    margin-top: 1.666rem; }
  .design-system-layout--cover > .design-system-layout__main {
    margin-bottom: auto;
    margin-top: auto; }