Add branding splash and simulator cycle timing

frontend/src/styles.css

@@ -47,6 +47,19 @@ body {
   background: var(--bg-base);
 }
 
+.splash-screen {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  background: #FFFFFF;
+}
+
+.splash-screen img {
+  width: min(220px, 58vw);
+  height: auto;
+  animation: splash-enter 420ms ease both;
+}
+
 button,
 input,
 select,
@@ -71,6 +84,7 @@ button:disabled {
   padding: 12px;
 }
 
+.app-shell--workshop .demo-notice,
 .app-shell--workshop .hero,
 .app-shell--workshop .summary-ribbon,
 .app-shell--workshop .module-tabs {
@@ -97,6 +111,30 @@ button:disabled {
   align-items: start;
 }
 
+.demo-notice {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--accent) 46%, #FFFFFF);
+  border-radius: 12px;
+  background: var(--accent-light);
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(10, 47, 90, 0.06), 0 4px 12px rgba(10, 47, 90, 0.04);
+}
+
+.demo-notice strong {
+  flex: 0 0 auto;
+  font-family: "Space Grotesk", sans-serif;
+  font-size: var(--text-base);
+}
+
+.demo-notice span {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  line-height: 1.45;
+}
+
 .hero,
 .panel,
 .machine-card,
@@ -115,6 +153,20 @@ button:disabled {
   padding: 20px;
 }
 
+.brand-lockup {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 16px;
+}
+
+.brand-lockup__logo {
+  width: 74px;
+  max-height: 58px;
+  flex: 0 0 auto;
+  object-fit: contain;
+}
+
 .hero h1 {
   margin: 0;
   font-family: "Space Grotesk", sans-serif;
@@ -1066,6 +1118,8 @@ tr.is-selected-row td {
   }
 
   .hero,
+  .demo-notice,
+  .brand-lockup,
   .hero__controls,
   .machine-card__top,
   .machine-card__hero,
@@ -1080,6 +1134,10 @@ tr.is-selected-row td {
     justify-items: start;
   }
 
+  .brand-lockup__logo {
+    width: 64px;
+  }
+
   .panel-actions {
     justify-content: stretch;
   }
@@ -1105,6 +1163,18 @@ tr.is-selected-row td {
   }
 }
 
+@keyframes splash-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,