added switch between input and output

data/index.html

@@ -74,6 +74,16 @@
 
             <fieldset>
                 <legend>Input/Output 1</legend>
+                <label class="switch">
+                    <span>Output</span>
+                    <input
+                        type="checkbox"
+                        name="input-or-output-1"
+                        id="input-input-or-output-1"
+                    />
+                    <span class="slider"></span>
+                    <span>Input</span>
+                </label>
 
                 <input
                     type="number"
@@ -88,6 +98,17 @@
             <fieldset>
                 <legend>Input/Output 2</legend>
 
+                <label class="switch">
+                    <span>Output</span>
+                    <input
+                        type="checkbox"
+                        name="input-or-output-2"
+                        id="input-input-or-output-2"
+                    />
+                    <span class="slider"></span>
+                    <span>Input</span>
+                </label>
+
                 <input
                     type="number"
                     name="universe-2"

data/style.css

@@ -44,11 +44,60 @@ button {
     padding: 8px 16px;
 }
 
-:is(div:has(:is(input, select)), input, select)
+:is(div:has(:is(input, select)), input, select, label)
-    + :is(div:has(:is(input, select)), input, select) {
+    + :is(div:has(:is(input, select)), input, select, label) {
     margin-top: 8px;
 }
 
 .hidden {
     display: none;
 }
+
+label.switch {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+label.switch input {
+    display: none;
+}
+
+label.switch .slider {
+    display: inline-block;
+    position: relative;
+    height: 1em;
+    width: 2em;
+    background-color: #444;
+    border-radius: 1em;
+    border: 4px solid #444;
+}
+
+label.switch .slider::before {
+    content: "";
+    position: absolute;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    top: 50%;
+    background-color: white;
+    transition: all 0.1s linear;
+}
+
+label.switch:active .slider::before {
+    transform: scale(1.3);
+    transform-origin: 50% 50%;
+}
+
+label.switch input:not(:checked) + .slider::before {
+    left: 0%;
+    translate: 0 -50%;
+}
+
+label.switch input:checked + .slider::before {
+    left: 100%;
+    translate: -100% -50%;
+}