feat: show calculator status messages as overlay bar

samples/calc-02/index.css

@@ -65,6 +65,8 @@ body {
 		"buttons functions"
 		"keypad functions"
 		"keypad trigo";
+
+
 }
 
 .display-panel,
@@ -81,6 +83,7 @@ body {
 
 .display-panel {
 	grid-area: display;
+	position: relative;
 	padding: clamp(12px, 1.5vw, 16px);
 	background: linear-gradient(180deg, var(--display), var(--display2));
 	color: var(--displayText);
@@ -203,14 +206,38 @@ body {
 	padding-top: 10px;
 }
 
-.status-line {
-	grid-area: status;
-	padding: 10px 14px;
+.status-bar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 2;
+	padding: 8px 12px;
+	min-height: 30px;
 	display: flex;
 	align-items: center;
-	min-height: 42px;
-	font-size: 14px;
-	color: rgba(255, 255, 255, 0.85);
+	justify-content: center;
+	font-size: 13px;
+	font-weight: 700;
+	letter-spacing: 0.02em;
+	color: rgba(31, 42, 18, 0.96);
+	background: rgba(255, 246, 170, 0.92);
+	border-bottom: 1px solid rgba(31, 42, 18, 0.2);
+	transform: translateY(-100%);
+	opacity: 0;
+	transition: transform 180ms ease, opacity 180ms ease;
+	pointer-events: none;
+}
+
+.status-bar.is-visible {
+	transform: translateY(0);
+	opacity: 1;
+}
+
+.status-bar.is-error {
+	color: #fff;
+	background: rgba(72, 14, 14, 0.98);
+	border-bottom-color: rgba(255, 255, 255, 0.12);
 }
 
 .keypad-grid,