@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;500&display=swap');

* {
  -webkit-text-size-adjust: none;
}

body {
  margin: 2em 4em;
  font: 15px/1.4;
  background: #131415;
  font-family: "IBM Plex Sans", sans-serif;
  color: #fff;
}

code {
  font-family: "IBM Plex Mono", monospace;
  border-radius: 2px;
  background: #494B50;
  padding: 3px 6px;
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #EFEFF0;
}

.conform,
.compare {
  position: relative;
  width: 400px;
  padding: 20px;
  margin-top: 2px;
  margin-left: 2px;
  border-radius: 4px;
  background: linear-gradient(180deg, #303236 0%, #242628 100%);
  color: #C9CBCF;
  font-size: 14px;
}

.conform::before,
.compare::before {
  content: '';
  position: absolute;
  display: block;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: -1;
  background: linear-gradient(180deg, #494B50 0%, #303236 100%);
  border-radius: 4px;
}

.conform a,
.compare a {
  color: #33BBFF;
} 

.compare {
  margin-top: 14px;
}

.compare .progress-outer {
  margin: 14px 0 12px;
  background: #494B50;
  border-radius: 2px;
}
.compare .progress-inner {
  height: 10px;
  background: #C9CBCF;
  border-radius: 2px;
}

.conform:after {
  content: '';
  position: absolute;
  bottom: -24px;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"%3E%3Ccircle cx="18" cy="18" r="17.5" fill="url(%23paint0_linear_2803_1946)" stroke="url(%23paint1_linear_2803_1946)"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M19 10H17V17H10V19H17V26H19V19H26V17H19V10Z" fill="%23131415"/%3E%3Cdefs%3E%3ClinearGradient id="paint0_linear_2803_1946" x1="18" y1="0" x2="18" y2="36" gradientUnits="userSpaceOnUse"%3E%3Cstop stop-color="%23AFB1B6"/%3E%3Cstop offset="1" stop-color="%2361646B"/%3E%3C/linearGradient%3E%3ClinearGradient id="paint1_linear_2803_1946" x1="18" y1="0" x2="18" y2="36" gradientUnits="userSpaceOnUse"%3E%3Cstop stop-color="%23E4E5E7"/%3E%3Cstop offset="1" stop-color="%23797D86"/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
  border-radius: 100px;
  line-height: .888;
  width: 36px;
  height: 36px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.title {
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid #494B50;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 1.125;
  margin-bottom: 12px;
}

.conform-title,
.compare-title {
  line-height: 1.125;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
  color: #AFB1B6;
  letter-spacing: -0.02em;
}

.hist {
  margin-top: 14px;
}

button {
  display: block;
  margin-top: 14px;
  border-radius: 4px;
  background: #ADE0EB;
  color: #0C0D0D;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.125; 
  letter-spacing: -0.02em;
  border: none;
  padding: 4px 12px;
}

.matched::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.6261 5.31305C11.799 4.96726 11.6588 4.54679 11.313 4.3739C10.9673 4.20101 10.5468 4.34117 10.3739 4.68695L7.30823 10.8183L5.49497 9.00503C5.22161 8.73166 4.77839 8.73166 4.50503 9.00503C4.23166 9.27839 4.23166 9.72161 4.50503 9.99497L7.00502 12.495C7.16413 12.6541 7.39002 12.727 7.61213 12.691C7.83423 12.6549 8.02547 12.5143 8.1261 12.313L11.6261 5.31305Z" fill="%2300E599"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  float: left;
  margin-right: 6px;
}
.matched {
  color: #00E599;
  margin-top: 12px;
}
.invalid-accepted, .ambiguous-different {
  color: #F0F075;
  margin-top: 8px;
}
.valid-throws-error, .valid-parsed-wrong {
  color: #FF4C79;
  margin-top: 8px;
}

.collapsible {
  position: relative;
}
.collapsible input[type=checkbox] {
  display: none;
}
.collapsible input[type=checkbox]+.toggle {
  cursor: pointer;
}
.collapsible input[type=checkbox]+.toggle, .collapsible input[type=checkbox]+.toggle+.content {
  margin-left: 1.5em;
}
.collapsible input[type=checkbox]+.toggle::before {
  content: "▶︎";
  width: 1em;
  font-size: 65%;
  margin: .7ex 1.75ex 0 .25ex;
  transition: all .25s;
  position: absolute;
  left: 0;
  cursor: pointer;
}
.collapsible input[type=checkbox]:checked+.toggle::before {
  transform: rotate(90deg);
  transform-origin: center;
  margin: .7ex 2ex 0 0;
}
.collapsible input[type=checkbox]+.toggle+.content {
  display: none;
}
.collapsible input[type=checkbox]:checked+.toggle+.content {
  display: block; 
}