.cbr-counter {
  box-sizing: border-box; max-width: 36rem; margin: 1.75rem auto 0;
  padding: 1.2rem 1rem 1.5rem; text-align: center; color: #17201c;
  font: 1rem/1.5 system-ui, sans-serif;
}
.cbr-label { display: block; font: 700 .875rem/1.5 ui-monospace, monospace; letter-spacing: .06em; }
.cbr-display {
  display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 2px;
  margin: .6rem 0 .35rem; padding: 5px; border: 3px ridge #657066;
  background: #080e0a; color: #87ff61; font: 700 1.75rem/1.3 ui-monospace, monospace;
  font-variant-numeric: tabular-nums; box-shadow: 2px 2px 0 #c8ceca;
}
.cbr-display span { min-width: .72em; padding: 0 .1em; background: #172719; border: 1px solid #314636; }
.cbr-counter .cbr-status { margin: .2rem 0; font-size: .875rem; }
.cbr-explanation { margin: .2rem auto 0; max-width: 32rem; font-size: .875rem; }
.cbr-explanation summary { display: list-item; cursor: pointer; width: fit-content; margin: auto; padding: .65rem; min-height: 44px; box-sizing: border-box; }
.cbr-explanation p { margin: .3rem 0 0; text-align: left; }
.cbr-relic {
  display: flex; align-items: center; gap: 1.4rem; margin: 1rem 0 1.75rem;
  padding: 1.25rem; border: 1px solid #c9d2ce; border-left: 4px solid #ed1833;
  background: #f4f7f5; color: #17201c; font: 1rem/1.5 system-ui, sans-serif;
}
.cbr-relic-image { flex: 0 0 auto; padding: .7rem; background: #080e0a; line-height: 0; }
.cbr-relic img { display: block; width: 180px; height: 40px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.cbr-relic p { margin: .3rem 0 .2rem; max-width: 55rem; }
.cbr-relic a { color: inherit; }
.cbr-relic div > a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.cbr-relic a:focus-visible, .cbr-explanation summary:focus-visible { outline: 3px solid #e21d39; outline-offset: 4px; }
@media (max-width: 600px) { .cbr-relic { align-items: flex-start; flex-direction: column; gap: .85rem; } }