Fixed the dual bulb issue, added new font to typeface package

Signed-off-by: Alexander Lyall <alex@adcm.uk>

src/styles/binary.css

@@ -1,19 +1,34 @@
 :root{
   --bg: #1f2027;
-  --panel: #22242d;
   --panel2: rgba(255,255,255,.04);
   --text: #e8e8ee;
   --muted: #a9acb8;
   --accent: #33ff7a;
   --accent-dim: rgba(51,255,122,.15);
   --line: rgba(255,255,255,.12);
+
+  --danger: #e24444;
+  --danger-dim: rgba(226,68,68,.22);
+  --success: #2fd66b;
+  --success-dim: rgba(47,214,107,.22);
 }
 
+/* -------- Fonts -------- */
 @font-face{
   font-family: "DSEG7ClassicRegular";
   src:
-    url("/fonts/DSEG7Classic-Regular.ttf") format("truetype"),
-    url("/fonts/DSEG7Classic-Regular.woff") format("woff");
+    url("/fonts/DSEG7Classic-Regular.woff") format("woff"),
+    url("/fonts/DSEG7Classic-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face{
+  font-family: "SevenSegment";
+  src:
+    url("/fonts/Seven-Segment.woff2") format("woff2"),
+    url("/fonts/Seven-Segment.woff") format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -21,7 +36,7 @@
 
 body{
   margin:0;
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   background: var(--bg);
   color: var(--text);
 }
@@ -40,7 +55,6 @@ body{
 }
 
 .readout{
-  background: transparent;
   text-align:center;
   padding: 10px 10px 0;
 }
@@ -54,6 +68,7 @@ body{
   margin-top: 10px;
 }
 
+/* Anything that is a number uses DSEG7 */
 .num{
   font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-weight: 400;
@@ -62,17 +77,17 @@ body{
 }
 
 .denaryValue{
-  font-size: 70px; /* smaller than before */
+  font-size: 70px;
   line-height: 1.0;
   margin: 6px 0 10px;
 }
 
 .binaryValue{
-  font-size: 52px; /* smaller than before */
+  font-size: 52px;
   letter-spacing: .12em;
   line-height: 1.0;
   margin: 6px 0 14px;
-  white-space: pre; /* keep spaces */
+  white-space: pre;
 }
 
 .controlsStack{
@@ -99,6 +114,7 @@ body{
   font-weight: 700;
   cursor: pointer;
   min-width: 170px;
+  font-family: "SevenSegment", system-ui, sans-serif;
 }
 .btn:active{ transform: translateY(1px); }
 
@@ -152,9 +168,10 @@ body{
   color: var(--text);
   font-weight: 700;
   font-size: 14px;
+  font-family: "SevenSegment", system-ui, sans-serif;
 }
 
-/* Shared toggle switch (mode + bit switches) */
+/* Switch */
 .switch{
   position: relative;
   width: 56px;
@@ -195,14 +212,13 @@ body{
   background: var(--accent);
 }
 
-/* Tools card layout */
+/* Tools layout */
 .toolRow{
   display:grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-bottom: 10px;
 }
-
 .toolRow2{
   display:grid;
   grid-template-columns: 1fr 1fr;
@@ -217,10 +233,26 @@ body{
   color: #fff;
   cursor: pointer;
   font-weight: 800;
+  font-family: "SevenSegment", system-ui, sans-serif;
 }
 
+/* Narrower arrow buttons (only the arrow pair) */
 .toolSpin{
-  font-size: 22px; /* bigger spin feature */
+  font-size: 22px;
+  height: 48px;
+  max-width: 120px;      /* narrower */
+  justify-self: start;
+  padding: 0;
+}
+
+/* Down = red, Up = green */
+#btnDec{
+  background: var(--danger-dim);
+  border-color: rgba(226,68,68,.45);
+}
+#btnInc{
+  background: var(--success-dim);
+  border-color: rgba(47,214,107,.45);
 }
 
 /* Bit width control */
@@ -240,6 +272,7 @@ body{
   cursor:pointer;
   font-weight:900;
   font-size:18px;
+  font-family: "SevenSegment", system-ui, sans-serif;
 }
 
 .bitInputWrap{
@@ -258,6 +291,7 @@ body{
   font-weight:800;
   letter-spacing:.18em;
   text-transform:uppercase;
+  font-family: "SevenSegment", system-ui, sans-serif;
 }
 .bitInput{
   width:86px;
@@ -275,18 +309,20 @@ body{
   margin:0;
 }
 
-/* Bits area (wrap every 8 bits, centered) */
+/* Bits: wrap every 8, centred */
 .bitsWrap{
   margin-top: 22px;
 }
-
 .bitsGrid{
   display:grid;
   gap: 18px;
   justify-content:center;
-  grid-template-columns: repeat(8, minmax(90px, 1fr)); /* wraps at 8 */
+  grid-template-columns: repeat(8, minmax(90px, 1fr));
   padding-top: 18px;
 }
+.bitsGrid.bitsFew{
+  grid-template-columns: repeat(var(--cols, 4), minmax(90px, 1fr));
+}
 
 .bit{
   display:flex;
@@ -297,36 +333,38 @@ body{
   text-align:center;
 }
 
-/* “Bulb like 💡” but consistent + bigger */
+/* Bulb (emoji only — no circle, no ::before so it won't duplicate) */
 .bulb{
-  width: 34px;     /* bigger */
-  height: 34px;    /* bigger */
-  border-radius: 50%;
-  background: rgba(255,255,255,.08);
-  border: 1px solid rgba(255,255,255,.12);
+  width: auto;
+  height: auto;
+  border: none;
+  background: transparent;
+  border-radius: 0;
   box-shadow: none;
+
   display:flex;
   align-items:center;
   justify-content:center;
-  font-size: 20px;
+
+  font-size: 26px;
   line-height: 1;
-  opacity: .55;
-}
-.bulb::before{
-  content: "💡";
+  opacity: .45;
   filter: grayscale(1);
-}
-.bulb.on{
-  opacity: 1;
-  background: rgba(255,216,107,.18);
-  border-color: rgba(255,216,107,.55);
-  box-shadow: 0 0 18px rgba(255,216,107,.45);
-}
-.bulb.on::before{
-  filter: grayscale(0);
+  text-shadow: none;
 }
 
-/* Bit value (MSB becomes negative in two’s mode via JS label text) */
+/* IMPORTANT: remove the pseudo-element that was causing the 2nd bulb */
+.bulb::before{
+  content: none;
+}
+
+.bulb.on{
+  opacity: 1;
+  filter: grayscale(0);
+  text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
+}
+
+/* Bit value numbers use DSEG7 */
 .bitVal{
   font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
   font-size: 28px;
@@ -336,11 +374,6 @@ body{
   min-height: 32px;
 }
 
-/* Make sure small bit counts still look centered/nice */
-.bitsGrid.bitsFew{
-  grid-template-columns: repeat(var(--cols, 4), minmax(90px, 1fr));
-}
-
 @media (max-width: 980px){
   .topGrid{ grid-template-columns: 1fr; }
   .denaryValue{ font-size: 62px; }