/* Hallmark: utility controller; native controls, layout and sizing only. */
:root { font-family: system-ui, sans-serif; }
html, body { margin: 0; overflow-x: clip; }
body { padding: 1rem; }
main { width: min(100%, 32rem); margin: 0 auto; }
h1 { margin: 0 0 1rem; }
button, input { font: inherit; }
button { min-height: 2.75rem; }
.connection { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.connection p { flex-basis: 100%; margin: 0 0 .5rem; }
fieldset { min-width: 0; margin: 0 0 1rem; padding: 1rem; }
fieldset > label:not(.row) { display: block; min-height: 2.75rem; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; }
.row output { margin-left: auto; white-space: nowrap; }
input[type="range"] { display: block; width: 100%; min-height: 2.75rem; margin: 0 0 .75rem; }
input[type="color"] { width: 4rem; height: 2.75rem; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; }
[hidden] { display: none !important; }