Merge pull request #46 from lawrencerowland/codex/improve-ui-on-app

Improve Petri Net Checks UI with a quick tip callout

Author: lawrencerowland

apps/petri-net-checks/src/App.css

@@ -15,6 +15,19 @@
   color: #4b5563;
 }
 
+
+.petri-net-note {
+  border-left: 4px solid #0ea5e9;
+  background: #f0f9ff;
+  color: #0f172a;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+}
+
+.petri-net-note strong {
+  color: #075985;
+}
+
 .petri-net-actions {
   display: flex;
   flex-wrap: wrap;

apps/petri-net-checks/src/App.jsx

@@ -10,6 +10,10 @@ export default function App() {
           app, or open it directly in a new tab.
         </p>
       </header>
+      <section className="petri-net-note" aria-label="Usage tips">
+        <strong>Quick tip:</strong> Use the static fallback in a separate tab to
+        compare flow states side-by-side while you explore the embedded view.
+      </section>
       <div className="petri-net-actions">
         <a className="btn" href="./static.html">Open static fallback</a>
         <a className="btn" href="../../index.html">Back to app index</a>