* {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    *:focus {
      outline: none
    }

    *:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
      border-radius: 3px
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important
    }

    html,
    body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    #app {
      height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative
    }

    .view {
      display: none;
      flex: 1;
      overflow: hidden;
      flex-direction: column
    }

    .view.active {
      display: flex
    }