#hero .hrow { grid-template-columns: minmax(0, 1fr); }
#hero .hrow:has(#hcProg) { grid-template-columns: minmax(0, 1fr) auto; }
#hcLevel {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; min-width: 0; padding: 7px 10px;
}
#hcLevel .hc-face { width: 32px; height: 39px; border-radius: 10px; }
#hcLevel .hc-body { min-width: 0; }
#hcLevel .hc-line { align-items: baseline; gap: 6px; line-height: 18px; }
#hcLevel .hc-line b { font-size: 17px; line-height: 18px; }
#hcLevel .hc-language { font-size: 9px; font-weight: 500; color: #a8b6d2; }
#hcLevel .hc-rank { display: flex; align-items: baseline; gap: 5px; min-width: 0; min-height: 14px; line-height: 14px; }
#hcLevel .hc-rank-label { flex: 0 0 auto; color: #8999b9; font-size: 8px; font-weight: 400; }
#hcLevel #hTitle {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #d1dafa; font: 600 10px/14px var(--sans, sans-serif);
}
#hcLevel #hTitle:empty::after { content: "—"; color: #8999b9; }
#hcLevel .hc-track { margin-top: 3px; height: 3px; }
#hcLevel .hc-note { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; line-height: 10px; }
#hcLevel .hc-streak {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  align-self: stretch; gap: 1px; min-width: 45px; margin-left: 1px; padding-left: 8px;
  border-left: 1px solid rgba(170, 191, 230, .16);
}
#hcLevel .hc-streak-value { display: flex; align-items: center; gap: 4px; }
#hcLevel .hc-fire { display: block; flex: 0 0 auto; width: 24px; height: 28px; overflow: visible; }
#hcLevel #hStreak { color: #f6e9da; font: 700 18px/1 var(--display, sans-serif); font-variant-numeric: tabular-nums; }
#hcLevel .hc-streak-label { color: #a8b1c6; font-size: 8px; line-height: 12px; white-space: nowrap; }
#hcLevel:focus-visible { outline: 2px solid #8fbef6; outline-offset: 3px; }
@media (max-width: 350px) {
  #hcLevel { grid-template-columns: 29px minmax(0, 1fr) auto; gap: 6px; padding: 7px 8px; }
  #hcLevel .hc-face { width: 29px; height: 36px; }
  #hcLevel .hc-streak { min-width: 43px; padding-left: 6px; }
  #hcLevel .hc-fire { width: 21px; height: 25px; }
  #hcLevel #hStreak { font-size: 16px; }
  #hcLevel .hc-language { font-size: 8px; }
  #hcLevel .hc-rank { gap: 4px; }
}