Add another styled story

Demonstrate scaling of detail in styled key set.

src/components/Keyboard/Keyboard.stories.tsx

@@ -106,3 +106,41 @@ export const Styled = (props?: Partial<Props>) => (
     />
   </Wrapper>
 )
+
+export const AnotherStyled = (props?: Partial<Props>) => (
+  <div
+    style={{
+      // @ts-ignore
+      '--size-scale-factor': 2,
+    }}
+  >
+    <Wrapper>
+      <Keyboard
+        {...props}
+        startKey={21}
+        endKey={108}
+        keyChannels={[
+          {
+            channel: 0,
+            key: 60,
+            velocity: 1,
+          },
+          {
+            channel: 0,
+            key: 63,
+            velocity: 1,
+          },
+          {
+            channel: 0,
+            key: 67,
+            velocity: 1,
+          },
+        ]}
+        keyComponents={{
+          natural: StyledNaturalKey,
+          accidental: StyledAccidentalKey,
+        }}
+      />
+    </Wrapper>
+  </div>
+)

src/components/StyledAccidentalKey/StyledAccidentalKey.tsx

@@ -104,7 +104,7 @@ const B12 = styled('div')({
   width: '100%',
   height: '100%',
   padding:
-    'calc(3px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1)) calc(7px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
+    'calc(3px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1)) calc(7px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1))',
   boxSizing: 'border-box',
   position: 'absolute',
   top: 0,
@@ -123,7 +123,7 @@ const B14 = styled('div')({
   width: '100%',
   height: 'calc(6px * var(--size-scale-factor, 1))',
   padding:
-    '0 calc(1px * var(--size-scale-factor, 1)) calc(5px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+    '0 calc(1px * var(--size-scale-factor, 1)) calc(5px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
   boxSizing: 'border-box',
   position: 'absolute',
   bottom: 0,