body {
    margin: 0;
}

canvas {
    display: block;
}

body>main {
    position: absolute;
    width: auto;
    margin: 0;
    padding: 0;
    top: 16px;
    left: 16px;
}

main>article {
    margin: 0;
    padding-top: 0;
    padding-bottom: 24px;
}

main>article>header {
    margin-top: 0;
    margin-bottom: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
}

main>article>header>h1 {
    margin: 0;
}

.fa-square {
    padding-right: 4px;
}

:root {
    --spacing: 12px;
}

.grid {
    display: block;
}

.grid>button {
    margin: 8px;
    padding: 24px;
    width: auto;
}

details:not([role]) {
    padding-bottom: 0;
}

details:not([role])>summary {
    margin-bottom: 18px;
    font-size: 24px;
}

details[role=list] {
    min-width: 400px;
}

hr {
    margin-top: 18px;
    margin-bottom: 12px;
}

main>article>details>form>input[type="number"] {
    display: block;
    width: 100%;
}

main>article>details>form>button[role="button"] {
    display: block;
    width: 100%;
}

.grid.controls>button {
    padding: 12px;
    margin-top: 20px;
}

.grid.controls>button:first-child {
    margin-left: 20px;
}