Tweaks to Binary UI

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

src/styles/base.css

@@ -1,52 +0,0 @@
-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

@@ -1,68 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-@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

@@ -1,43 +0,0 @@
-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);
- }
-}