html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #444;
    color: #fff;
}

body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.ctrl {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 125px;
    height: 225px;
    text-align: center;
}

.ctrl label {
    display: block;
}

.ctrl input {
    box-sizing: border-box;
    width: 50px;
    text-align: center;
    color: #000;
    border: 1px solid #000;
}

svg {
    height: 100%;
    width: 100%;
    vertical-align: top;
}

svg .keyboard path {
    stroke: #000;
    fill: #fff;
    cursor: pointer;
    vector-effect: non-scaling-stroke;
}

svg .keyboard path.sharp {
    fill: #000;
}

svg .keyboard path.ut {
    fill: #faa;
}

svg .keyboard path.first-ut {
    fill: #f44;
}

svg .keyboard path:hover {
    fill: #888;
}

svg .keyboard:active path:hover {
    fill: #cdf;
    filter: drop-shadow(0 0 20px #acf);
}