body {
  font-family: sans-serif;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  margin: 1rem
}

@media (min-width: 48rem) {
  body {
    margin: 2rem
  }
}

body:after {
  content: "";
  clear: both
}

h1 {
  margin: 3rem 0;
  font-weight: 400;
  font-size: 1.125em;
  letter-spacing: .05em
}

h1 a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid #ccc
}

.controls a {
  display: inline-block;
  color: #aaa;
  text-decoration: none;
  padding: .25em .25em .125em;
  border-radius: .125em;
  margin: 0 .25em .25em 0;
  box-shadow: 0 0 0 1px #ccc;
  font-size: .75em
}

.controls a:hover, .controls a:active {
  color: #000
}

.controls a[data-suite] {
  margin-bottom: 2rem
}

.controls a[data-suite], .controls a[data-all] {
  color: #000
}

.controls a[data-small], .controls a[data-large] {
  transition: opacity .14s ease-in-out;
  box-shadow: none
}

.controls li:not(:hover) a[data-small], .controls li:not(:hover) a[data-large] {
  opacity: 0
}

.controls ul, .controls li {
  list-style: none;
  padding: 0;
  margin: 0
}

.controls ul {
  margin-bottom: 2rem
}

.controls li {
  margin-bottom: .25em
}

@media (min-width: 48em) {
  .results-wrapper {
    position: absolute;
    left: 20em;
    top: 3em;
    right: 0em;
  }
}

@media (max-width: 48em) {
  .results-wrapper {
    margin-right: -2rem
  }
}

#results {
  display: flex;
  flex-wrap: wrap
}

.test {
  margin: 0 2rem 2rem 0
}

.test h2 {
  color: #a0a0a0;
  font-size: .75em
}

.test p {
  color: #a0a0a0;
  font-size: .666em;
  white-space: pre;
  font-family: monospace
}

.test .canvas-wrap {
  position: relative;
  overflow: hidden
}

.test .canvas-wrap canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: .5
}

.test.with-smart-underline .canvas-wrap canvas {
  display: none
}

.test .canvas-wrap:hover canvas {
  opacity: 1
}

.test .canvas-wrap .dom-text {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top
}

.test:not(.with-smart-underline) .canvas-wrap:hover .dom-text {
  color: transparent;
  cursor: default;
  box-shadow: inset 0 0 0 1px red
}

.test.fail {
  box-shadow: 0 0 0 3px red
}