styles.css

:root {
    --border-base: solid var(--color-grey-light);

    --border-thin: 1px var(--border-base);
    --border-thick: var(--space-200) var(--border-base);

    --color-grey: hsl(0deg 0% 50%);
    --color-grey-dark: hsl(0deg 0% 35%);
    --color-grey-light: hsl(0deg 0% 85%);

    --measure-min: 45ch;
    --measure-target: 65ch;

    --space-200: 0.5em;
    --space-300: 0.75em;
    --space-400: 1em;
    --space-500: 2em;
}

body {
    padding: var(--space-400);
}

fieldset {
    display: grid;
    gap: var(--space-400);
    grid-template-columns: [input] auto [label] 1fr;
    padding-block: var(--space-400);
}

fieldset input {
    grid-column: input;
}

fieldset label {
    grid-column: label;
}

footer {
    border-block-start: var(--border-thin);
    padding-block-start: var(--space-400);
    text-align: center;
}

form {
    display: grid;
    gap: var(--space-500);
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--measure-min), var(--measure-target))
    );
    justify-content: center;
}

form button {
    min-inline-size: 15ch;
}

form p {
    display: flex;
    flex-direction: column;
}

form section {
    --inset: var(--space-500);

    border: var(--border-thin);
    border-inline-start: var(--border-thick);
    border-start-end-radius: var(--space-400);
    padding: var(--space-500);
}

header {
    border-block-end: var(--border-thin);
    padding-block-end: var(--space-400);
    text-align: center;
}

h2 {
    margin-block: var(--space-500) var(--space-300);
}

h3 {
    margin-block-end: var(--space-500);
}

hr {
    border: none;
    border-block-start: var(--border-thick);
    margin-block: var(--space-500);
}

output {
    background-color: var(--color-grey-light);
    color: var(--color-grey-dark);
    font-family: monospace;
    padding: var(--space-400);
}

summary > * {
    display: inline;
}

[hidden] {
    display: none;
}

.flow > * + * {
    margin-block-start: var(--space-500);
}

.measure {
    max-inline-size: var(--measure-target);
}

.numbered {
    counter-reset: numbered;
}

.numbered .numbered__item::before {
    color: var(--color-grey);
    content: counter(numbered) ". ";
    counter-increment: numbered;
}

[data-js-available="false"] .js-only {
    display: none;
}