body {
    margin: 0;
    padding: 0;
}
body.pen {
    touch-action: none;
}

* {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1rem !important;
}

body {
    overscroll-behavior: contain;
}

body>section#svg {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}

body>section#svg>svg>g#meshes>path {
    display: none;
    stroke: yellowgreen;
}

body>section#svg>svg>g#meshes>path.show,
body>section#svg>svg>g#meshes.show>path {
    display: initial;
}

body>section#svg>svg>g#meshes>path.active {
    stroke: blueviolet;
}

body>section#svg>svg>g#steps>path {
    fill: none;
    stroke: black;
}

body>section#svg>svg>g#steps>path.active {
    stroke: orangered;
}

body>section#svg>svg>g#points>g circle {
    fill: none;
    stroke: black;
}

body>section#svg>svg>g#points>g circle {
    fill: lawngreen;
    stroke: transparent;
}


body>section#svg>svg>g#points>g.active circle {
    stroke: red;
}

body>section#svg>svg>g#points>g>g.active circle {
    fill: blue;
}

body>section#svg>svg>g#points>g>g circle.show,
body>section#svg>svg>g#points>g.active circle:hover {
    fill: red;
}

body>section#svg>svg>g#points>g.locked circle {
    fill: black !important;
    stroke: none !important;
}

.hidden>* {
    display: none;
}

nav.hidden>label.tool {
    display: inherit;
}

label>div {
    font-size: 1rem !important;
    line-height: 1.5rem;
}

label>div.big {
    font-weight: bold;
    font-size: 1.3rem !important;
    line-height: 1.3rem;
}

body>nav {
    width: 100%;
    display: flex;
    gap: 5px;
    position: fixed;
    padding: 5px;
    opacity: 0.8;
    z-index: 10;
}

body>aside {
    position: fixed;
    right: 0;
    padding: 5px;
    opacity: 0.8;
    z-index: 10;
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

body>aside>nav {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-content: stretch;
}

input[type="text"],
select {
    font-size: 1rem;
    background-color: aliceblue;
    border: none;
    outline: none;
}

select {
    user-select: none;
}

label>div {
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    background-color: cadetblue;
    color: white;
    height: 1.5rem;
    padding: 0.5rem;
    cursor: pointer;
    user-select: none;
}

label.mode {
    font-weight: bold;
    font-size: 1.5rem;
}

body>nav>div>label>div {
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    width: 2rem;
    background-color: cadetblue;
    color: white;
    cursor: pointer;
    user-select: none;
}

body>nav label>input {
    display: none;
}

body>nav input[type="range"] {
    width: 7rem;
    margin-top: 15px;
}

body>nav input[type="range"]::before {
    content: attr(title);
    position: absolute;
    top: 5px;
    font-size: 0.7rem;
    font-weight: bold;
}

body>nav>label {
    position: relative;
    display: block;
    padding: 0;
}

body>nav label>div.label:hover,
body>nav label>div.label {
    background-color: darkkhaki;
    cursor: auto;
}

body>nav label>input[type="checkbox"]:checked~div,
body>nav label>input[type="radio"]:checked~div {
    background-color: chocolate;
}

body>nav button:hover,
body>nav label>div:hover {
    background-color: darksalmon;
}

body>aside button {
    font-weight: bold;
}

select[name="steps"] option::before {
    content: "    "
}

select[name="steps"] option.locked::before {
    content: "🔒"
}

div#debug {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 999999;
    font-weight: bold;
    background-color: #ffffff80;
    padding: 0 10px;
    text-align: right;
    pointer-events: none;
}