body {
  color: black;
  background: white;
  font: 14px/20px sans-serif;
}

.string {
  color: #B70;
}

.number {
  color: #370;
}

.boolean,
.null {
  color: #07F;
}

.key {
  color: #037;
}

@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background: #222;
  }

  .string {
    color: #DB7;
  }

  .number {
    color: #DFB;
  }

  .boolean,
  .null {
    color: #7BF;
  }

  .key {
    color: #CEF;
  }
}

a {
  color: inherit;
}

pre {
  white-space: pre-wrap;
  font: 12px/18px Monaco, monospace;
}

#start {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#start>div {
  max-width: 520px;
  padding: 50px;
}

.drop #start {
  box-shadow: inset 0 0 0 10px #07F;
}

.center {
  text-align: center;
}

.error {
  color: red;
}

h3 {
  margin: 0;
}

#loaded {
  position: absolute;
  inset: 0;
  display: none;
}

#sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
  background: rgba(127, 127, 127, 0.1);
  overflow-y: auto;
  color: inherit;
  border: none;
}

#sidebar:focus {
  outline: none;
}

#sidebar option {
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#preview {
  position: absolute;
  left: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding: 20px;
}

#preview .info {
  white-space: pre-wrap;
  margin-bottom: 20px;
}

#preview img {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);
  background: 0 0 / 20px 20px repeating-conic-gradient(white 0% 25%, #DDD 25% 50%, white 50% 75%, #DDD 75% 100%);
  max-width: 600px;
  max-height: 600px;
}

#preview .expand {
  background: rgba(191, 191, 191, 0.3);
  box-shadow: 0 0 0 1px rgba(191, 191, 191, 0.8);
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 1px;
  cursor: pointer;
}

#preview .expand:focus {
  box-shadow: 0 0 0 1px currentColor;
  outline: none;
}

#preview .expand:hover {
  background: rgba(191, 191, 191, 0.6);
  box-shadow: 0 0 0 1px currentColor;
  border-radius: 5px;
  padding: 0 3px;
  cursor: pointer;
}

#preview .color {
  display: inline-block;
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 1px currentColor;
  vertical-align: middle;
  margin-right: 1px;
}

#preview .path {
  display: inline-block;
  height: 16px;
  vertical-align: middle;
  margin-right: 1px;
}

#progress {
  position: absolute;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  color: #FFF;
}

#progress .bar {
  position: relative;
  width: 200px;
  height: 4px;
  background: #777;
}

#progress .bar div {
  position: absolute;
  left: 0;
  top: -3px;
  background: #FFF;
  width: 0%;
  height: 10px;
}