html,
body {
    margin: 0;
    padding: 0;
}

body {
    font: normal 16px/24px 'Helvetica Neue', Helvetica, Arial, freesans, sans-serif;

    color: #000;
}

#playground {
    margin: 20px;
}

.player {
    min-height: 24px;
    margin: 10px;
    padding: 10px;

    border: 2px solid #ccc;
}

.player.active {
    border-color: #0a0;
    background: #cdfece;
}

.player.event-touchstart::after {
    content: 'touchstart';
}

.player.event-mousedown::after {
    content: 'mousedown';
}

.player.event-mouseup::after {
    content: 'mouseup';
}

.player.event-click::after {
    content: 'click';
}

.player.event-dblclick::after {
    content: 'dblclick';
}