vogsphere.css

.magrathea-tool.vogsphere {
    --gap-xs: 0.25em;
    --gap-s: 0.5em;
    --gap-m: 1em;
    --gap-l: 1.5em;
    --gap-xl: 1.75em;

    /* comfortable reading width */
    --measure: 60ch; /* https://en.wikipedia.org/wiki/Line_length */

    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    max-width: var(--measure);
    padding: var(--gap-l) 0;
}

/********************************************* GLOBAL */
.magrathea-tool.vogsphere *,
.magrathea-tool.vogsphere *::before,
.magrathea-tool.vogsphere *::after {
    box-sizing: border-box;
}

.magrathea-tool.vogsphere > * + * {
    margin: var(--gap-xl) 0;
}

/********************************************* ELEMENTS */

/* shared styles */
.magrathea-tool.vogsphere input,
.magrathea-tool.vogsphere select,
.magrathea-tool.vogsphere textarea {
    font: inherit;
}

/* individual styles */
.magrathea-tool.vogsphere button {
    border: 1px outset;
    display: block;
    font: inherit;
    margin-right: auto;
    margin-left: auto;
    padding: var(--gap-xs);
}

.magrathea-tool.vogsphere h2 {
    text-align: center;
}

.magrathea-tool.vogsphere h3 {
    margin-top: var(--gap-xl);
    margin-bottom: var(--gap-s);
}

.magrathea-tool.vogsphere pre {
    border: 1px solid;
    overflow: auto;
    padding: var(--gap-m);
}

.magrathea-tool.vogsphere section > * + * {
    margin-top: var(--gap-m);
}

.magrathea-tool.vogsphere ul.--minimal {
    list-style-type: none;
    margin-top: var(--gap-xs);
    margin-bottom: var(--gap-xs);
}

/********************************************* COMPONENTS */
.magrathea-tool.vogsphere .__input-group {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.magrathea-tool.vogsphere .__input-group > *.--full {
    grid-column: 1 / -1;
}

.magrathea-tool.vogsphere .__input-group > *.--aside {
    grid-column: 2;
}