.memory-cue{position:absolute;inset:1px;z-index:4;pointer-events:none;border:3px solid #9b6900;border-radius:inherit;box-shadow:inset 0 0 0 2px #fff6ce;animation:memory-cue-life var(--cue-life,900ms) ease-out both}
.memory-cue b{position:absolute;right:3px;top:3px;min-width:24px;min-height:24px;display:grid;place-items:center;border-radius:50%;padding:2px;background:#fff6ce;color:#543c00;font:800 15px/1.1 'Trebuchet MS',Arial,sans-serif;box-shadow:0 1px 4px #24152b44}
.memory-cue-invite{border-style:dashed;border-color:#f6ca48;box-shadow:inset 0 0 0 2px #452072}
.memory-cue-first{border-color:#8155ba;box-shadow:inset 0 0 0 2px #efe3ff}
.memory-cue-match{border-color:#4d791c;box-shadow:inset 0 0 0 2px #e9ffc7}
.memory-cue-match b{background:#e9ffc7;color:#315c08}
.memory-cue-mismatch{border-color:#9a5414;box-shadow:inset 0 0 0 2px #fff0d7;border-style:dashed}
.memory-cue-mismatch b{background:#fff0d7;color:#713900}
#pairs{position:relative}
.memory-cue-progress{inset:100% -5px auto auto;width:32px;height:24px;border:0;box-shadow:none;border-radius:12px}
.memory-cue-progress b{inset:0;background:#e9ffc7;color:#315c08}
@keyframes memory-cue-life{0%{opacity:0;transform:scale(.94)}18%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.98)}}
@media(prefers-reduced-motion:reduce){.memory-cue{animation:none;transform:none}}
#showDemonstration{display:block;margin:10px 0;min-height:44px}