.hm-top { color: var(--text); }
.hm-svg { width: 170px; height: 170px; display: block; }
.hm-svg .frame { color: var(--faint); stroke: var(--faint); }
.hm-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hm-l { width: 30px; height: 40px; border-bottom: 3px solid var(--text); display: grid; place-items: center; font-size: 26px; font-weight: 500; }
.hm-l.missed { color: var(--red); }
.hm-keys { display: grid; grid-template-columns: repeat(9, 38px); gap: 6px; justify-content: center; }
.cell.hm-k { height: 42px; font-size: 16px; font-weight: 500; }
.hm-k.hit { background: var(--green); border-color: var(--green); color: #fff; }
.hm-k.miss { opacity: .35; }
@media (max-width: 420px) { .hm-keys { grid-template-columns: repeat(7, 38px); } }