.tt16 {
  background: #1a1a1a;
  padding: 16px 22px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt16n {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(232, 226, 208, 0.18);
}
.tt16n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt16meta {
  padding-right: 22px;
  border-right: 1px solid rgba(232, 226, 208, 0.18);
  transition: opacity 0.4s;
}
.tt16name {
  font:
    800 11px/1.3 ui-monospace,
    monospace;
  color: #e8e2d0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tt16id {
  font:
    600 9px/1 ui-monospace,
    monospace;
  color: rgba(232, 226, 208, 0.5);
  margin-top: 6px;
  letter-spacing: 0.2em;
}
.tt16tabs {
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.tt16b {
  border: 0;
  background: transparent;
  padding: 0;
  font:
    700 28px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.4);
  cursor: pointer;
  transition:
    color 0.3s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt16b:hover {
  color: rgba(232, 226, 208, 0.8);
}
.tt16n input:checked + .tt16b {
  color: #c43a32;
  transform: scale(1.15);
}
.tt16p {
  display: none;
  padding-top: 12px;
  font:
    italic 11px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
}
.tt16:has(#tt16-r1:checked) .tt16p:nth-of-type(1),
.tt16:has(#tt16-r2:checked) .tt16p:nth-of-type(2),
.tt16:has(#tt16-r3:checked) .tt16p:nth-of-type(3) {
  display: block;
}