feat(rebrand): migrate CS:Box content to Computing:Box branding

- Rebrand UI text, navigation, footer, and metadata to Computing:Box
- Add canonical URLs and updated Open Graph metadata for SEO
- Replace legacy CS:Box imagery with new Computing:Box assets
- Update About page copy to reflect expanded curriculum focus
- Enhance A Level hexadecimal simulator with custom binary input
- Regenerate exported assets and font hashes

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

export/assets/css/Inter.css

@@ -1,6 +1,6 @@
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -9,7 +9,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -18,7 +18,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -27,7 +27,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -36,7 +36,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -45,7 +45,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -54,7 +54,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -63,7 +63,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -72,7 +72,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -81,7 +81,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -90,7 +90,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -99,7 +99,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -108,7 +108,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -117,7 +117,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -126,7 +126,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -135,7 +135,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -144,7 +144,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -153,7 +153,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -162,7 +162,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -171,7 +171,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -180,7 +180,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -189,7 +189,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -198,7 +198,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -207,7 +207,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -216,7 +216,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -225,7 +225,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -234,7 +234,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -243,7 +243,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -252,7 +252,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -261,7 +261,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -270,7 +270,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -279,7 +279,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -288,7 +288,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -297,7 +297,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -306,7 +306,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -315,7 +315,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -324,7 +324,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -333,7 +333,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -342,7 +342,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -351,7 +351,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -360,7 +360,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -369,7 +369,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -378,7 +378,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -387,7 +387,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -396,7 +396,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -405,7 +405,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -414,7 +414,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -423,7 +423,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -432,7 +432,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -441,7 +441,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -450,7 +450,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -459,7 +459,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -468,7 +468,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -477,7 +477,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -486,7 +486,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -495,7 +495,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -504,7 +504,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -513,7 +513,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -522,7 +522,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -531,7 +531,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -540,7 +540,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -549,7 +549,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -558,7 +558,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -567,7 +567,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -576,7 +576,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -585,7 +585,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -594,7 +594,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -603,7 +603,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -612,7 +612,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -621,7 +621,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
+	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;

export/assets/css/Open Sans.css

@@ -1,6 +1,6 @@
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-6dec32ba32c583143f37e96a59e0fb9e.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-6dec32ba32c583143f37e96a59e0fb9e.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -9,7 +9,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-225b7d18262c1041a32b79d200e92bf1.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-225b7d18262c1041a32b79d200e92bf1.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -18,7 +18,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-dea7e20916bef72920c929acfb3a4641.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-dea7e20916bef72920c929acfb3a4641.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -27,7 +27,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-15e68f85ff378c85165faa90038c1c34.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-15e68f85ff378c85165faa90038c1c34.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -36,7 +36,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-5e916bd22ed9429b9b6c1e583e7e3bac.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-5e916bd22ed9429b9b6c1e583e7e3bac.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -45,7 +45,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-fab2dc2a64560c0036fff6d74173d2fe.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-fab2dc2a64560c0036fff6d74173d2fe.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -54,7 +54,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-92fcb6995c062a9e725f088d0a4946e3.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-92fcb6995c062a9e725f088d0a4946e3.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -63,7 +63,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-698c10e372a42d57247ac8e1ba5de182.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-698c10e372a42d57247ac8e1ba5de182.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -72,7 +72,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-68df54b884d8032b226b60b2de0d3d9f.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-68df54b884d8032b226b60b2de0d3d9f.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -81,7 +81,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-d839b7fe1395f21cd350be1b26d80cfc.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
+	src: url(../../assets/fonts/Open%20Sans-d839b7fe1395f21cd350be1b26d80cfc.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;

export/assets/js/hexadecimal.js

@@ -1,63 +1,161 @@
 // Ensure the script only runs if the URL path contains "hexadecimal"
-if (window.location.pathname.includes('hexadecimal')) {
+if (window.location.pathname.includes("hexadecimal")) {
+  const isGCSE = window.location.pathname.includes("gcse-hexadecimal");
+  const hexLength = isGCSE ? 2 : 4;       // GCSE: 2 hex digits, A Level: 4
+  const binaryLength = isGCSE ? 8 : 16;   // GCSE: 8 bits, A Level: 16
+  const maxDenary = isGCSE ? 255 : 65535;
 
-    const isGCSE = window.location.pathname.includes('gcse-hexadecimal');
-    const hexLength = isGCSE ? 2 : 4;
-    const binaryLength = isGCSE ? 8 : 16;
-    const maxDenary = isGCSE ? 255 : 65535;
+  // Each slider represents a 4-bit nibble (0–15) at a given place value
+  const placeValues = { 1: 0, 16: 0, 256: 0, 4096: 0 };
+  const sliders = {};
 
-    const placeValues = { 1: 0, 16: 0, 256: 0, 4096: 0 };
-    const sliders = {};
-    const columnValues = isGCSE ? [16, 1] : [4096, 256, 16, 1];
+  // Order matters: left->right nibble columns
+  const columnValues = isGCSE ? [16, 1] : [4096, 256, 16, 1];
 
-    // Attach event listeners for sliders
-    ['slider1', 'slider16', 'slider256', 'slider4096'].forEach((sliderId) => {
-        const slider = document.getElementById(sliderId);
-        if (slider) {
-            sliders[sliderId] = slider;
-            slider.addEventListener("input", (e) => {
-                e.stopPropagation(); // Prevent event propagation to Bootstrap
-                updatePlace(parseInt(sliderId.replace('slider', ''), 10));
-            });
-        }
+  // Attach event listeners for sliders
+  ["slider1", "slider16", "slider256", "slider4096"].forEach((sliderId) => {
+    const slider = document.getElementById(sliderId);
+    if (slider) {
+      sliders[sliderId] = slider;
+      slider.addEventListener("input", (e) => {
+        e.stopPropagation(); // Prevent event propagation to Bootstrap
+        updatePlace(parseInt(sliderId.replace("slider", ""), 10));
+      });
+    }
+  });
+
+  function updatePlace(place) {
+    const slider = sliders[`slider${place}`];
+    if (!slider) return;
+    placeValues[place] = parseInt(slider.value, 10) || 0;
+    updateNumbers();
+  }
+
+  function updateNumbers() {
+    let denary = 0;
+    let binary = "";
+    let hexadecimal = "";
+
+    columnValues.forEach((column) => {
+      const value = placeValues[column] ?? 0; // nibble 0..15
+      denary += value * column;
+      binary += convertToBinaryNibble(value);
+      hexadecimal += convertToHexDigit(value);
     });
 
-    function updatePlace(place) {
-        if (sliders[`slider${place}`]) {
-            placeValues[place] = parseInt(sliders[`slider${place}`].value, 10);
-            updateNumbers();
-        }
-    }
+    // Ensure fixed lengths
+    binary = binary.slice(-binaryLength).padStart(binaryLength, "0");
+    hexadecimal = hexadecimal.slice(-hexLength).padStart(hexLength, "0");
 
-    function updateNumbers() {
-        let denary = 0;
-        let binary = '';
-        let hexadecimal = '';
+    const binEl = document.getElementById("binaryNumber");
+    const denEl = document.getElementById("denaryNumber");
+    const hexEl = document.getElementById("hexadecimalNumber");
 
-        columnValues.forEach((column) => {
-            const value = placeValues[column];
-            denary += value * column;
-            binary += convertToBinary(value);
-            hexadecimal += convertToHex(value);
-        });
+    if (binEl) binEl.innerText = binary;
+    if (denEl) denEl.innerText = denary;
+    if (hexEl) hexEl.innerText = hexadecimal;
+  }
 
-        binary = binary.slice(-binaryLength).padStart(binaryLength, '0');
-        hexadecimal = hexadecimal.slice(-hexLength).padStart(hexLength, '0');
+  function convertToBinaryNibble(num) {
+    return num.toString(2).padStart(4, "0");
+  }
 
-        document.getElementById("binaryNumber").innerText = binary;
-        document.getElementById("denaryNumber").innerText = denary;
-        document.getElementById("hexadecimalNumber").innerText = hexadecimal;
-    }
+  function convertToHexDigit(num) {
+    return num.toString(16).toUpperCase(); // 0..F
+  }
 
-    function convertToBinary(num) {
-        return num.toString(2).padStart(4, '0');
-    }
+  function setSlidersFromDenary(denary) {
+    // Clamp & normalise
+    denary = Number.isFinite(denary) ? denary : 0;
+    denary = Math.max(0, Math.min(maxDenary, Math.floor(denary)));
 
-    function convertToHex(num) {
-        return num.toString(16).toUpperCase();
-    }
-
-    document.addEventListener('DOMContentLoaded', () => {
-        updateNumbers();
+    // Convert denary into nibble values for each column
+    columnValues.forEach((column) => {
+      const nibble = Math.floor(denary / column);
+      placeValues[column] = Math.max(0, Math.min(15, nibble));
+      denary -= placeValues[column] * column;
     });
+
+    // Push values to sliders (if present)
+    columnValues.forEach((column) => {
+      const slider = sliders[`slider${column}`];
+      if (slider) slider.value = placeValues[column];
+    });
+
+    updateNumbers();
+  }
+
+  function cleanHexInput(input) {
+    return String(input)
+      .trim()
+      .replace(/^0x/i, "")
+      .toUpperCase();
+  }
+
+  function cleanBinaryInput(input) {
+    return String(input).trim().replace(/\s+/g, "");
+  }
+
+  // === PUBLIC BUTTON HANDLERS ===
+  // Call these from onclick="" on your buttons
+
+  window.requestHexadecimal = function requestHexadecimal() {
+    const raw = prompt(
+      `Enter a ${hexLength}-digit hexadecimal value (0-9, A-F):`,
+      ""
+    );
+    if (raw === null) return;
+
+    const hex = cleanHexInput(raw);
+
+    const re = new RegExp(`^[0-9A-F]{${hexLength}}$`);
+    if (!re.test(hex)) {
+      alert(`Please enter exactly ${hexLength} hex digit(s) using 0-9 and A-F.`);
+      return;
+    }
+
+    const denary = parseInt(hex, 16);
+    setSlidersFromDenary(denary);
+  };
+
+  window.requestDenaryForHexadecimal =
+    function requestDenaryForHexadecimal() {
+      const raw = prompt(`Enter a denary value (0 to ${maxDenary}):`, "");
+      if (raw === null) return;
+
+      // Allow digits only
+      const cleaned = String(raw).trim();
+      if (!/^\d+$/.test(cleaned)) {
+        alert("Please enter a whole number in denary (digits only).");
+        return;
+      }
+
+      const denary = parseInt(cleaned, 10);
+      if (denary < 0 || denary > maxDenary) {
+        alert(`Please enter a number between 0 and ${maxDenary}.`);
+        return;
+      }
+
+      setSlidersFromDenary(denary);
+    };
+
+  window.requestBinaryforHexadecimal = function requestBinaryforHexadecimal() {
+    const raw = prompt(`Enter a ${binaryLength}-bit binary value (0s and 1s):`, "");
+    if (raw === null) return;
+
+    const bin = cleanBinaryInput(raw);
+
+    const re = new RegExp(`^[01]{${binaryLength}}$`);
+    if (!re.test(bin)) {
+      alert(`Please enter exactly ${binaryLength} bits using only 0 and 1.`);
+      return;
+    }
+
+    const denary = parseInt(bin, 2);
+    setSlidersFromDenary(denary);
+  };
+
+  document.addEventListener("DOMContentLoaded", () => {
+    updateNumbers();
+  });
 }