* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #a6a8a5; color: #232725; font-family: Arial, Helvetica, sans-serif; }
header { position: absolute; top: 32px; left: 36px; z-index: 1; pointer-events: none; }
header > span { font-size: 12px; font-weight: bold; letter-spacing: 4px; }
h1 { margin: 10px 0 0; font-size: 25px; font-weight: normal; letter-spacing: -0.7px; }
h1 b { margin-left: 8px; color: #555b56; font-size: 14px; font-weight: normal; }
#carStage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; touch-action: none; cursor: grab; outline: none; }
#carStage.dragging { cursor: grabbing; }
#carStage canvas { display: block; width: 100%; height: 100%; }
#carStatus { position: absolute; left: 20px; right: 20px; top: 45%; text-align: center; pointer-events: none; }
#carStatus:empty { display: none; }
footer { position: absolute; bottom: 28px; left: 20px; right: 20px; text-align: center; pointer-events: none; }
footer p { margin: 0 0 14px; font-size: 12px; letter-spacing: 0.2px; }
footer p span { padding: 0 9px; color: #646b65; }
.buttons { display: inline-flex; pointer-events: auto; }
button { min-height: 44px; padding: 0 19px; border: 1px solid #646b65; border-radius: 3px; background: #b7bab5; color: #242a25; font: 12px Arial, Helvetica, sans-serif; cursor: pointer; }
button + button { margin-left: 8px; }
button:hover, button:focus { background: #ced0cb; }
button:focus { outline: 2px solid #294dcb; outline-offset: 3px; }
.error { position: absolute; top: 42%; width: 100%; text-align: center; }
@media (max-width: 600px) {
    header { top: 23px; left: 24px; }
    h1 { font-size: 22px; }
    footer { bottom: 23px; }
    footer p { font-size: 11px; }
    button { min-height: 46px; }
}
@media (max-height: 500px) {
    header { top: 15px; left: 20px; }
    h1 { margin-top: 6px; font-size: 20px; }
    footer { bottom: 12px; }
    footer p { display: none; }
}