.keyboard{margin:24px auto 8px;max-width:760px}
.key-row{display:flex;justify-content:center;gap:8px;margin:8px}
.key{width:62px;height:55px;border:1px solid var(--key-color);border-bottom:4px solid var(--key-color);border-radius:7px;background:color-mix(in srgb,var(--key-color) 7%,white);text-align:center;color:var(--key-color);padding:6px 0}
.key b{display:block;font-size:19px}.key small{font:11px ui-monospace,monospace}
.key.locked{background:#ffe3e9;color:#b52b4b;border-color:#d34b6c}
.key.denied{box-shadow:0 0 0 3px #e57c97,0 0 20px #d34b6c33}
.thermal-letter{display:inline-block;padding:3px 1px}
.cool,.legend .cool{color:#286f98}.warm,.legend .warm{color:#976b12}.hot,.legend .hot{color:#b35c1d}.unavailable,.legend .unavailable{color:#bd294c}
.thermal-letter.next-letter{border-bottom:3px solid currentColor}
.thermal-letter.unavailable{background:#ffe1e9;border-radius:4px;text-decoration:underline double;text-underline-offset:5px}
.next-status{font-size:13px;font-weight:750;min-height:24px;margin:16px 0 6px}
.word-card.waiting{border-color:#d26380;background:#fff1f5}.word-card.waiting.active{box-shadow:inset 0 0 0 1px #d26380}
.word-card .hint{min-height:20px;font-size:11px}.legend{text-align:center;font-size:11px;margin-bottom:0}
.cool-progress{font:12px ui-monospace,monospace;color:var(--accent)}.keyboard.cooling .key{box-shadow:0 0 0 2px #8bd8ec,inset 0 0 18px #bdeeff;background:#e9faff}