Add SVG option

style.css

@@ -4,7 +4,7 @@
     --text-color: #000000;
     --border-color: #000000;
     --pane-bg: #ffffff;
-    
+
     /* Typography */
     /* Serif for the Interface/Authority */
     /* --font-serif: "Georgia", "Times New Roman", Times, serif; */
@@ -28,13 +28,13 @@ body {
     -webkit-font-smoothing: antialiased;
 }
 
-/* LAYOUT: CSS GRID 
+/* LAYOUT: CSS GRID
    Rows: Content (1fr) -> Footer (auto)
 */
 .app-container {
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr auto; 
+    grid-template-rows: 1fr auto;
     min-height: 100vh;
     border-top: 5px solid var(--border-color); /* Masthead line */
 }
@@ -86,12 +86,12 @@ input, textarea, select {
     background-color: transparent;
     border: 1px solid var(--border-color);
     border-radius: 0; /* Crucial: No rounded corners */
-    
+
     /* Data font */
     font-family: var(--font-mono);
     font-size: 1rem;
     color: var(--text-color);
-    
+
     /* Reset native styles */
     appearance: none;
     -webkit-appearance: none;
@@ -140,7 +140,7 @@ summary {
     transition: background 0.1s;
 }
 
-/* Custom indicator logic if you want complete control, 
+/* Custom indicator logic if you want complete control,
    but standard text [+]/[-] is very brutalist. */
 details[open] summary {
     border-bottom: 1px solid var(--border-color);
@@ -187,10 +187,10 @@ details .control-group:last-child {
     width: 256px;
     height: 256px;
     margin: 0 auto 2rem auto;
-    
+
     /* Frame */
     border: 1px solid var(--border-color);
-    padding: 10px; 
+    padding: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -211,7 +211,7 @@ button {
     color: var(--bg-color); /* White */
     border: 1px solid var(--text-color);
     border-radius: 0;
-    
+
     font-family: var(--font-mono);
     font-size: 0.9rem;
     font-weight: 700;
@@ -273,7 +273,7 @@ button:disabled {
 @media (min-width: 768px) {
     .app-container {
         /* Sidebar fixed 400px, Content fluid */
-        grid-template-columns: 400px 1fr; 
+        grid-template-columns: 400px 1fr;
         max-width: 100%;
         margin: 0;
         border-top: none;
@@ -282,20 +282,20 @@ button:disabled {
     .input-pane {
         border-right: 1px solid var(--border-color);
         /* Allow natural height so page scrolls to footer */
-        height: auto; 
+        height: auto;
         min-height: 100vh;
     }
 
     .preview-pane {
         min-height: 100vh;
         justify-content: center; /* Center Vertically */
-        
+
         /* Engineering Paper Texture */
         background-color: #fdfdfd;
         background-image: radial-gradient(#000 0.5px, transparent 0.5px);
         background-size: 20px 20px;
     }
-    
+
     .sticky-wrapper {
         position: sticky;
         top: 2rem;
@@ -371,10 +371,10 @@ input[type="number"] {
     -moz-appearance: textfield; /* Remove Firefox spinner */
 }
 /* Remove Webkit spinners if you prefer a cleaner look */
-input[type="number"]::-webkit-inner-spin-button, 
-input[type="number"]::-webkit-outer-spin-button { 
-    -webkit-appearance: none; 
-    margin: 0; 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
 }
 
 /* Color Group Layout */
@@ -422,3 +422,26 @@ input[type="color"]::-webkit-color-swatch {
     font-size: 0.9rem;
     text-transform: uppercase;
 }
+
+/* Radio Button Logic inside the bordered box */
+input[type="radio"] {
+    /* Reset the width 100% from the general input rule */
+    width: 1.2rem;
+    height: 1.2rem;
+    border: 1px solid var(--border-color);
+    border-radius: 50%; /* Radios can stay round, or make them 0 for squares */
+    appearance: none;
+    -webkit-appearance: none;
+    background: transparent;
+    position: relative;
+    margin-right: 0.5rem;
+}
+
+input[type="radio"]:checked {
+    background: var(--text-color); /* Fill black when checked */
+    box-shadow: inset 0 0 0 3px #fff; /* Create a 'donut' look */
+}
+
+input[type="radio"]:focus {
+    outline: none;
+}