.xr-stage {
  background: #0b0b0b;
  border-bottom: var(--bw) solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.xr-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.xr-controls {
  display: grid;
  gap: 14px;
}

.xr-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.xr-row .seg {
  justify-self: start;
  flex-wrap: wrap;
}

.xr-side {
  display: grid;
  gap: 28px;
}

.xr-samples {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.xr-sample {
  display: grid;
  gap: 6px;
  text-align: left;
}

.xr-sample img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--bw) solid var(--ink);
  filter: grayscale(1);
  transition: transform var(--t), box-shadow var(--t);
}

.xr-sample span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}

.xr-sample:hover img {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.xr-sample[aria-pressed='true'] img {
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}

.xr-sample[aria-pressed='true'] span {
  color: var(--ink);
}

.xr-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.xr-upload .dbtn {
  cursor: pointer;
}

.xr-results {
  display: grid;
  gap: 20px;
}

.xr-result {
  display: grid;
  gap: 10px;
}

.xr-result__top,
.xr-result__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.xr-verdict {
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  text-align: right;
}

.xr-verdict.is-hot {
  color: var(--accent);
}

.xr-disclaimer {
  margin: -36px 0 48px;
}

@media (max-width: 620px) {
  .xr-samples {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xr-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}