layout prototype

src/lib/components/LayoutCC1.svelte

@@ -12,13 +12,13 @@
   {/each}
 </fieldset>
 
-<div class="col" style="gap: 0">
+<div class="col layout" style="gap: 0">
   <div class="row" style="gap: 156px">
     <div class="row">
       <RingInput {activeLayer} />
       <div class="col">
         <RingInput {activeLayer} />
-        <RingInput {activeLayer} />
+        <RingInput {activeLayer} type="secondary" />
       </div>
       <div class="col">
         <RingInput {activeLayer} />
@@ -62,7 +62,7 @@
     align-items: center;
     justify-content: center;
 
-    margin: 16px;
+    margin-block-end: -36px;
     padding: 0;
 
     border: none;

src/lib/components/RingInput.svelte

@@ -8,7 +8,10 @@
     ["j", "k", "l"],
   ]
 
-  export let layerNames = ["Primary Layer", "Number Layer", "Function Layer"]
+  /** @type {'primary' | 'secondary' | 'tertiary'} */
+  export let type = "primary"
+
+  const layerNames = ["Primary Layer", "Number Layer", "Function Layer"]
 
   const virtualLayerMap = [1, 0, 2]
   const characterOffset = 8
@@ -24,7 +27,7 @@
   }
 </script>
 
-<div class="radial">
+<div class="radial {type}">
   {#each layout as keys, quadrant}
     <button title={getKeyDescriptions(keys)}>
       {#each keys as value, layer}