#origin {
    position: absolute;
    width: 12px;
    height: 12px;
    z-index: 2;
    background-color: red;
}

#destination {
    position: absolute;
    width: 12px;
    height: 12px;
    z-index: 1;
    background-color: lime;
}

#pen {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: black;
}

#canvas{
    background: #eee;
    display: block;
    max-width: 100%;
    height: auto;
    touch-action: none;
}

#controller{
    float: right;
}

@media (max-width: 600px) {
    body {
        margin: 0;
        padding: 8px;
        overflow-x: hidden;
        font-family: system-ui, sans-serif;
    }

    #controller {
        float: none;
        margin-top: 12px;
        line-height: 1.8;
    }

    #controller input[type="text"],
    #controller input[type="number"] {
        box-sizing: border-box;
        max-width: 92px;
        min-height: 36px;
    }

    #controller button {
        min-height: 44px;
    }
}