.xi-instrument {
  --xi-mint: #8de5c8;
  --xi-muted: #a9c0b7;
  overflow: hidden;
  position: relative;
  border: 1px solid #567571;
  border-radius: 15px;
  color: #fbefd2;
  background: linear-gradient(155deg,#213f43,#162e34 72%);
  box-shadow: inset 0 1px #76908a59;
}
.xi-instrument:focus-visible { outline: 3px solid #ffe1a1; outline-offset: 3px; }
.xi-instrument .xi-heading, .xi-instrument .xi-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  line-height: 1.2;
}
.xi-instrument .xi-heading { justify-content: space-between; border-bottom: 1px solid #58767555; }
.xi-instrument .xi-heading strong { color: #fff0d1; font-size: .96rem; }
.xi-instrument .xi-heading span { color: var(--xi-muted); font-size: .78rem; }
.xi-instrument .xi-stage {
  width: 100%;
  height: clamp(112px, 20vh, 165px);
  display: block;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.xi-instrument .xi-stage > * { pointer-events: none; }
.xi-instrument .xi-status {
  min-height: 2rem;
  background: #10282bb3;
  border-top: 1px solid #5577715c;
  font-size: .81rem;
  color: #d8e8d7;
}
.xi-instrument .xi-status i { flex: 0 0 .52rem; height: .52rem; border-radius: 50%; background: #ddac71; }
.xi-instrument[data-match="true"] .xi-status i { background: var(--xi-mint); }
.xi-instrument .xi-status b { flex: none; margin-left: auto; color: #fee1ac; font-variant-numeric: tabular-nums; }
.xi-instrument .xi-rotor { transform-box: fill-box; transform-origin: center; animation: xi-spin var(--xi-spin) linear infinite; }
.xi-instrument .xi-counter { animation-direction: reverse; animation-delay: -.11s; }
@keyframes xi-spin { 0%,100% { transform:scaleX(1) } 25%,75% { transform:scaleX(.1) } 50% { transform:scaleX(-1) } }
@media(max-width:480px) {
  .xi-instrument .xi-heading,.xi-instrument .xi-status { padding: .45rem .65rem; }
  .xi-instrument .xi-stage { height: clamp(96px, 15vh, 130px); }
}