body {
background:#2d2a24;
color:#ddd;
font-family:system-ui;
}

main {
background:#6f6551;
max-width:1000px;
margin:2rem auto;
padding:2rem;
border-radius:8px;
}

a {
color:#e0c766;
}

.dot {
width:1rem;
height:1rem;
border:2px solid #111;
border-radius:50%;
display:inline-block;
margin:.15rem;
}

.dot.filled {
background:#111;
}

table {
border-collapse: collapse;
margin: 1rem 0;
}

th,
td {
padding: .35rem .6rem;
border-bottom: 1px dotted #b7aa91;
text-align: left;
}

.template-section {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #b7aa91;
}

.template-groups {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}

.template-group {
background: rgba(0,0,0,.12);
padding: .75rem;
border-radius: .35rem;
}

@media (max-width: 900px) {
.template-groups {
grid-template-columns: 1fr;
}
}

input,
select,
button {
font: inherit;
padding: .35rem .5rem;
border-radius: .25rem;
border: 1px solid #b7aa91;
}

button {
cursor: pointer;
}

form {
margin: 1rem 0 2rem 0;
}

input[type="number"] {
max-width: 8rem;
}

form + form {
margin-top: 1rem;
}