Add branding splash and simulator cycle timing

simulator-ui/src/styles.css

@@ -22,6 +22,19 @@ body {
   min-width: 320px;
 }
 
+.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 {
@@ -54,6 +67,21 @@ button:disabled {
   max-width: 1280px;
 }
 
+.brand-lockup {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  gap: 18px;
+}
+
+.brand-lockup__logo {
+  width: 82px;
+  max-height: 68px;
+  flex: 0 0 auto;
+  object-fit: contain;
+  margin-top: 4px;
+}
+
 .eyebrow {
   margin: 0 0 8px;
   color: var(--accent);
@@ -371,10 +399,20 @@ pre {
   }
 
   .hero,
+  .brand-lockup,
   .control-grid {
     grid-template-columns: 1fr;
   }
 
+  .brand-lockup {
+    display: grid;
+  }
+
+  .brand-lockup__logo {
+    width: 72px;
+    margin-top: 0;
+  }
+
   .connection-card {
     min-width: 0;
   }
@@ -384,6 +422,18 @@ pre {
   }
 }
 
+@keyframes splash-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 @media (max-width: 620px) {
   .scenario-grid,
   .numeric-grid {