feat(binary): add full binary simulator with unsigned and two’s complement modes

- Introduce new Binary Simulator page with adjustable bit width (4–16 bits)
- Support unsigned and two’s complement representations with live conversion
- Add left/right shift operations and custom binary/denary input
- Implement accessible bulb-and-switch UI with MD3-inspired styling
- Add seven-segment display font assets for realistic number output
- Establish shared base layout, styles, and tooling for future simulators

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

src/styles/base.css

@@ -0,0 +1,52 @@
+/* src/styles/base.css */
+@import "./md3-tokens.css";
+html, body{ height:100%; }
+body{
+ margin:0;
+ font-family: var(--font-sans);
+ background: var(--md-surface-2);
+ color: var(--md-on-surface);
+}
+a{ color: var(--md-primary); text-decoration: none; }
+a:hover{ text-decoration: underline; }
+.container{
+ max-width: 1100px;
+ margin: 0 auto;
+ padding: 16px;
+}
+.card{
+ background: var(--md-surface);
+ border: 1px solid var(--md-outline);
+ border-radius: var(--radius-2);
+ box-shadow: var(--shadow-1);
+ padding: 16px;
+}
+.btn{
+ display:inline-flex;
+ gap:8px;
+ align-items:center;
+ justify-content:center;
+ border-radius: 999px;
+ border: 1px solid var(--md-outline);
+ background: var(--md-surface);
+ color: var(--md-on-surface);
+ padding: 10px 14px;
+ font-weight: 600;
+ cursor: pointer;
+}
+.btn:hover{ filter: brightness(0.98); }
+.btn:focus{ outline:none; box-shadow: var(--md-focus); }
+.btn-primary{
+ background: var(--md-primary);
+ color: var(--md-on-primary);
+ border-color: transparent;
+}
+.badge{
+ display:inline-block;
+ padding: 2px 10px;
+ border-radius: 999px;
+ font-size: 12px;
+ border: 1px solid var(--md-outline);
+ background: var(--md-surface-2);
+}
+code, pre{ font-family: var(--font-mono); }

src/styles/binary.css

@@ -0,0 +1,68 @@
+.binary-container {
+  max-width: 1100px;
+  margin: auto;
+  padding: 2rem;
+  color: #e0e0e0;
+}
+
+.display {
+  text-align: center;
+}
+
+.label {
+  font-size: 1.2rem;
+  opacity: 0.7;
+}
+
+.number {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: #00ff66;
+}
+
+.controls {
+  margin-top: 1rem;
+}
+
+.controls button {
+  margin: 0.25rem;
+  padding: 0.6rem 1rem;
+  font-size: 1rem;
+}
+
+.bits {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 1rem;
+  margin-top: 3rem;
+}
+
+.bit {
+  width: 40px;
+  height: 80px;
+  background: #333;
+  border-radius: 20px;
+  position: relative;
+  cursor: pointer;
+}
+
+.bit::after {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: #555;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 6px;
+  left: 4px;
+  transition: all 0.2s ease;
+}
+
+.bit.on {
+  background: #00c853;
+}
+
+.bit.on::after {
+  bottom: 42px;
+  background: #eaffea;
+}

src/styles/fonts.css

@@ -0,0 +1,11 @@
+@font-face {
+  font-family: "DSEG7";
+  src: url("/fonts/DSEG7Classic-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.dseg {
+  font-family: "DSEG7", monospace;
+  letter-spacing: 0.15em;
+}

src/styles/md3-tokens.css

@@ -0,0 +1,43 @@
+/* src/styles/md3-tokens.css */
+/* MD3-inspired tokens tuned for education: high readability, clear contrast, calm surfaces */
+:root{
+ /* Typography */
+ --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+ /* Spacing + shape */
+ --radius-1: 10px;
+ --radius-2: 16px;
+ --radius-3: 22px;
+ --shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
+ /* Color roles (keep simple) */
+ --md-surface: #ffffff;
+ --md-surface-2: #f6f7fb;
+ --md-on-surface: #111318;
+ --md-primary: #2f6fed; /* calm blue */
+ --md-on-primary: #ffffff;
+ --md-secondary: #5a5f72; /* muted */
+ --md-on-secondary: #ffffff;
+ --md-tertiary: #0f766e; /* teal for "practical" tools */
+ --md-on-tertiary: #ffffff;
+ --md-outline: #d7dbe7;
+ --md-success: #1a7f37;
+ --md-warning: #b54708;
+ --md-danger: #b42318;
+ /* Focus ring for accessibility */
+ --md-focus: 0 0 0 3px rgba(47,111,237,.28);
+}
+@media (prefers-color-scheme: dark){
+ :root{
+ --md-surface: #0b0e14;
+ --md-surface-2: #121725;
+ --md-on-surface: #e8eaf2;
+ --md-primary: #9bb6ff;
+ --md-on-primary: #0b0e14;
+ --md-secondary: #b8bccd;
+ --md-on-secondary: #0b0e14;
+ --md-tertiary: #4fd1c5;
+ --md-on-tertiary: #0b0e14;
+ --md-outline: #2b3244;
+ --md-focus: 0 0 0 3px rgba(155,182,255,.25);
+ }
+}