Added timer

www/style/styles.css

@@ -1,3 +1,4 @@
+/* Copyright John Salguero All rights Reserved */
 html, body {
   margin: 0;
   height: 100vh;
@@ -11,9 +12,46 @@ html, body {
   font-family: Arial;
 }
 
+#timer {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 60px;
+  height: 60px;
+  z-index: 10;
+}
+
+#timer svg {
+  transform: rotate(-90deg); /* start from top */
+}
+
+#timer-bg {
+  fill: none;
+  stroke: rgba(255,255,255,0.2);
+  stroke-width: 8;
+}
+
+#timer-progress {
+  fill: none;
+  stroke: #22c55e; /* green */
+  stroke-width: 8;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 1s linear;
+}
+
+#timer-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 28px;
+  font-weight: bold;
+  color: white;
+}
+
 #problem {
   position: absolute;
-  top: 10%;
+  top: 15%;
   left: 50%;
   transform: translateX(-50%);
 
@@ -21,18 +59,18 @@ html, body {
   text-align: center;
 }
 
-#equation {
+#equation-main, #equation-next {
   position: absolute;
   top: 30%;
   left: 50%;
   transform: translateX(-50%);
-  font-size: 32px;
+  font-size: 48px;
+  transition: all 0.5s ease;
+}
 
-  font-family: "Comic Sans MS", cursive; /* surprisingly effective */
-  text-shadow: 
-    0 0 2px rgba(255,255,255,0.8),
-    0 0 6px rgba(255,255,255,0.4);
-  transition: opacity 0.5s ease, transform 0.5s ease;
+#equation-next {
+  opacity: 0;
+  transform: translate(-50%, 40px); /* start slightly below */
 }
 
 #explanation {
@@ -42,7 +80,7 @@ html, body {
   transform: translateX(-50%);
   font-size: 24px;
   opacity: 0.8;
-} 28px;
+}
 
 #steps {
   position: absolute;
@@ -73,6 +111,10 @@ html, body {
   z-index: 0;
 }
 
+#timer.low {
+  animation: pulse 1s infinite;
+}
+
 .fade-out {
   opacity: 0;
   transform: translateX(-50%) scale(0.95);
@@ -83,17 +125,14 @@ html, body {
   transform: translateX(-50%) scale(1);
 }
 
-.chalk-in {
-  opacity: 0;
-  transform: scale(1.05);
-  filter: blur(6px);
+.move-up {
+  transform: translate(-50%, 0);
 }
 
-.chalk-in-active {
-  opacity: 1;
-  transform: scale(1);
-  filter: blur(0px);
-  transition: all 0.4s ease;
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
 }
 
 @keyframes gradientShift {