✨ (layout): add global navigation, header, footer, and new assets

♻

♻️ (binary): refactor to use BaseLayout and remove inline boilerplate

Migrate

♻️ (binary): refactor UI layout and extract inline script to external file

Extract the inline

✨ feat(binary): add binary calculator script for interactive UI

Introduce `binary.

✨ (binary-tool): add random generation, bit width, and toolbox controls

Add functions for

♻️ refactor: remove unused unsignedBinary.js and binary.css files

Delete the unsigned

Wait, the prompt gave a specific list of GitMojis:
 * 🐛, Fix

✨ feat: add styles for binary converter UI components and controls

Add CSS classes for buttons, inputs

public/css/tools/binary.css

@@ -1,137 +0,0 @@
-/* ---------- DSEG7 font ---------- */
-/* Put your font file here:
-   public/fonts/DSEG7Classic-Regular.woff2
-*/
-@font-face {
-  font-family: "DSEG7ClassicRegular";
-  src: url("/fonts/DSEG7Classic-Regular.woff2") format("woff2");
-  font-display: swap;
-}
-
-/* ---------- Layout ---------- */
-.tool-shell {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  padding: 1rem;
-  background: #0b0f14;
-  color: #e7eaf0;
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
-}
-
-.tool-card {
-  width: min(1100px, 100%);
-  background: #111824;
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 18px;
-  padding: 1rem;
-}
-
-.tool-header h1 { margin: 0 0 .25rem 0; font-size: 1.4rem; }
-.tool-header p { margin: 0 0 1rem 0; opacity: .85; }
-
-.display-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: .75rem;
-  margin-bottom: .75rem;
-}
-
-.display-box {
-  background: #0b0f14;
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 14px;
-  padding: .75rem;
-}
-
-.display-label { font-size: .9rem; opacity: .8; margin-bottom: .25rem; }
-
-.sevenseg {
-  font-family: "DSEG7ClassicRegular", monospace;
-  font-size: clamp(2rem, 4vw, 3.2rem);
-  letter-spacing: 0.08em;
-  line-height: 1.1;
-}
-
-/* Buttons under denary/binary (your request) */
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .5rem;
-  margin-bottom: 1rem;
-}
-
-/* ---------- Simple MD3-ish buttons ---------- */
-.md3-btn {
-  border: 1px solid rgba(255,255,255,0.16);
-  background: rgba(255,255,255,0.06);
-  color: #e7eaf0;
-  padding: .6rem .9rem;
-  border-radius: 999px;
-  cursor: pointer;
-  font-weight: 600;
-}
-.md3-btn:hover { background: rgba(255,255,255,0.10); }
-.md3-btn--tonal { background: rgba(255,255,255,0.10); }
-
-/* ---------- Switches row ---------- */
-.switch-row {
-  display: grid;
-  grid-template-columns: repeat(8, minmax(90px, 1fr));
-  gap: .75rem;
-}
-
-.switch-col {
-  display: grid;
-  justify-items: center;
-  gap: .35rem;
-}
-
-.bit-label { opacity: .85; font-weight: 600; }
-
-/* ---------- “Light switch” rocker ---------- */
-.rocker {
-  position: relative;
-  width: 70px;
-  height: 46px;
-  display: inline-block;
-  user-select: none;
-}
-
-.rocker input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.rocker-body {
-  position: absolute;
-  inset: 0;
-  border-radius: 12px;
-  background: #1a2331;
-  border: 1px solid rgba(255,255,255,0.14);
-  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
-}
-
-/* the “toggle” */
-.rocker-body::after {
-  content: "";
-  position: absolute;
-  left: 6px;
-  top: 6px;
-  width: 58px;
-  height: 18px;
-  border-radius: 10px;
-  background: rgba(255,255,255,0.20);
-  transition: transform 180ms ease, background 180ms ease;
-}
-
-/* ON position */
-.rocker input:checked + .rocker-body::after {
-  transform: translateY(16px);
-  background: rgba(255,255,255,0.55);
-}
-
-@media (max-width: 900px) {
-  .switch-row { grid-template-columns: repeat(4, minmax(90px, 1fr)); }
-}