.word-card {
  min-width: 0;
}

.decimal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.value-card .decimal-grid label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  border: 0;
  padding: 5px 0;
}

.decimal-grid select,
.decimal-grid input {
  width: 100%;
  border: 1px solid #aeb5af;
  border-bottom: 3px solid #13879d;
  background: white;
  padding: 12px;
  font: bold 20px monospace;
  outline: none;
}

.nibble-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.nibble-grid section {
  min-width: 0;
  background: #e7e8e2;
  border-top: 4px solid #168ba1;
  padding: 11px 9px;
}

.nibble-grid h3 {
  min-height: 28px;
  margin: 0 0 8px;
  font: 900 10px/1.2 monospace;
  text-transform: uppercase;
  color: #45575b;
}

.value-card .nibble-grid label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  border: 0;
  padding: 4px 0;
  font: 800 9px monospace;
}

.nibble-grid output,
.nibble-grid input {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid #bcc2bd !important;
  border-bottom: 2px solid #899490 !important;
  background: #fff !important;
  padding: 8px 5px !important;
  text-align: center;
  font: bold 15px monospace !important;
  color: var(--ink);
}

.nibble-grid output {
  background: #f6f5f0 !important;
}

.read-decimals small {
  min-height: 13px;
  font: 800 9px monospace;
  color: #277047;
}

.read-decimals label.error small {
  color: #aa3e35;
}

.read-decimals label.error input {
  border-color: #c64b40;
  background: #fff1ee;
}

@media (max-width: 1100px) {
  .nibble-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.wire-section {
  background: #102733;
  color: #f5f4ed;
  padding: 65px clamp(18px, 7vw, 105px);
}

.wire-section .section-heading {
  border-color: #39505a;
}

.wire-section .section-heading p {
  color: #9aadb2;
}

.wire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 35px;
}

.wire-column {
  border: 1px solid #39505a;
  padding: 24px;
}

.wire-column h3 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 18px;
  font-size: 24px;
}

.wire-column h3 small {
  color: #82979e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.wire {
  display: grid;
  grid-template-columns: 14px 42px minmax(90px, 1fr) 105px 72px;
  gap: 10px;
  align-items: center;
  min-height: 43px;
  border-top: 1px solid #2b424d;
  font-size: 12px;
}

.wire > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #888;
}

.wire > b {
  color: var(--cyan);
  font: 800 13px monospace;
}

.wire > strong {
  color: #b9c7ca;
  text-align: right;
  font-size: 11px;
}

.wire > em {
  color: #b9c7ca;
  text-align: right;
  font: 800 12px monospace;
  font-style: normal;
}

.wire-mismatch {
  background: #542a27;
  box-shadow: inset 4px 0 0 #df6258;
}

.wire-mismatch > em {
  color: #ffb8ae;
}

.color-y7 { background:#8e5bc5!important }.color-y6 { background:#278bd0!important }.color-y5 { background:#35a75d!important }.color-y4 { background:#f2ce4b!important }.color-y3 { background:#ed8a39!important }.color-y2 { background:#d94b44!important }.color-y1 { background:#8b5a3c!important }.color-y0 { background:#a9b0b2!important }
.color-z7 { background:#8e5bc5!important;box-shadow:inset 0 -3px 0 #050708 }.color-z6 { background:#278bd0!important;box-shadow:inset 0 -3px 0 #050708 }.color-z5 { background:#35a75d!important;box-shadow:inset 0 -3px 0 #050708 }.color-z4 { background:#f2ce4b!important;box-shadow:inset 0 -3px 0 #050708 }.color-z3 { background:#ed8a39!important;box-shadow:inset 0 -3px 0 #050708 }.color-z2 { background:#d94b44!important;box-shadow:inset 0 -3px 0 #050708 }.color-z1 { background:#8b5a3c!important;box-shadow:inset 0 -3px 0 #050708 }.color-z0 { background:#a9b0b2!important;box-shadow:inset 0 -3px 0 #050708 }
.wire.return > i { background:#f5f5ef;border:1px solid #89999e }.wire.return.dark > i { box-shadow:inset 0 -3px 0 #050708 }

@media (max-width: 900px) {
  .wire-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .wire-column {
    padding: 16px;
  }

  .wire {
    grid-template-columns: 12px 35px 1fr 75px;
  }

  .wire > em {
    grid-column: 3 / 5;
    text-align: left;
    padding-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .decimal-grid,
  .nibble-grid {
    grid-template-columns: 1fr 1fr;
  }

  .value-card {
    padding: 16px;
  }
}