* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: hidden; }
body { margin: 0; padding: 24px; font: 18px Arial, sans-serif; }
header { position: relative; margin-bottom: 20px; padding-right: 60px; }
header p { margin: 0; color: #bdbdbd; }
h1 { margin: 8px 0; font-size: 1.89em; }
h1 img { margin-right: 10px; vertical-align: middle; }
h2 { margin: 0; font-size: 1.33em; }
main { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; height: 62vh; }
main > section { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex: 1; flex: 1; min-height: 0; background: #222; }
main > section + section { margin-top: 12px; }
main h2 { -webkit-flex: none; flex: none; padding: 16px; background: #333; text-align: center; }
main .ready h2 { background: #16a34a; color: #111; }
.cards { -webkit-flex: 1; flex: 1; padding: 8px 16px; min-height: 0; overflow: auto; }
.cards p { color: #ddd; }
.card { padding: 12px 0; border-bottom: 1px solid #555; }
.card strong { display: block; font-size: 2.56em; }
.card span { display: block; word-wrap: break-word; }
.card-called { padding-left: 12px; background: #244f36; animation: call-in .5s ease-out; }
@keyframes call-in { from { opacity: .45; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .card-called { animation: none; } }
#pairing { max-width: 580px; padding: 20px; background: #222; }
label { display: block; margin-bottom: 8px; }
input, button { padding: 10px 14px; font: inherit; border: 1px solid #777; border-radius: 4px; }
input { width: 130px; }
button { background: #fff; color: #111; cursor: pointer; }
button:focus, input:focus { outline: 3px solid #4ade80; outline-offset: 3px; }
button:disabled { opacity: .6; }
#sound { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 8px; background: #222; color: #fff; }
#sound .sound-on, #sound[aria-pressed="true"] .sound-off { display: none; }
#sound[aria-pressed="true"] .sound-on { display: inline; }
#link-pair { display: inline-block; margin-top: 6px; color: #eee; }
@media (max-width: 560px) {
  body { padding: 12px; }
  main > section + section { margin-top: 8px; }
}