Make demo mode more visible

Author: SpookyyQ

src/App.tsx

@@ -94,11 +94,18 @@ export default function App() {
   }, [demoMode])
 
   return (
-    <div className="atk-shell flex h-screen w-screen overflow-hidden text-white">
+    <div className={`atk-shell flex h-screen w-screen overflow-hidden text-white ${demoMode ? 'demo-shell' : ''}`}>
       <div className="atk-ribbon" />
       {tab !== 'home' && <Sidebar activeTab={tab} onTabChange={setTab} />}
       <div className="flex flex-col flex-1 overflow-hidden">
         <TopBar status={status} demoMode={demoMode} onDemoModeChange={setDemoMode} />
+        {demoMode && (
+          <div className="demo-mode-banner">
+            <span className="demo-mode-dot" />
+            <span>DEMO MODE</span>
+            <span className="font-semibold text-white/68">Virtual mouse active - hardware communication disabled</span>
+          </div>
+        )}
         <main className="relative flex-1 overflow-y-auto p-7">
           <div className="tab-switcher">
             <div className={`tab-panel ${tab === 'home' ? 'tab-panel-active' : ''}`}>

src/components/tabs/HomeTab.tsx

@@ -27,6 +27,11 @@ export default function HomeTab({ status, demoMode, onNavigate }: Props) {
         status.connected ? 'cursor-pointer hover:bg-white/[.07] hover:border-white/20' : 'cursor-default'
       }`}
     >
+      {demoMode && (
+        <div className="absolute left-4 top-4 z-10 rounded-full border border-accent/40 bg-accent/15 px-3 py-1 text-xs font-black uppercase tracking-[.18em] text-accent shadow-[0_0_24px_rgb(var(--color-accent)/.16)]">
+          Demo Mode
+        </div>
+      )}
       <div className="flex-1 flex items-center justify-center">
         <img
           src={mouseImage}

src/index.css

@@ -286,6 +286,38 @@ button, input {
   border-color: var(--theme-panel-border-hover);
 }
 
+.demo-shell {
+  box-shadow: inset 0 0 0 1px rgb(var(--color-accent) / .24);
+}
+
+.demo-mode-banner {
+  position: relative;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: .65rem;
+  min-height: 34px;
+  padding: 0 1.25rem;
+  border-bottom: 1px solid rgb(var(--color-accent) / .28);
+  background:
+    linear-gradient(90deg, rgb(var(--color-accent) / .18), rgb(var(--color-accent) / .065) 46%, transparent),
+    rgba(8, 8, 10, .72);
+  color: rgb(var(--color-accent) / 1);
+  font-size: .78rem;
+  font-weight: 900;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
+}
+
+.demo-mode-dot {
+  width: .55rem;
+  height: .55rem;
+  border-radius: 999px;
+  background: rgb(var(--color-accent) / 1);
+  box-shadow: 0 0 18px rgb(var(--color-accent) / .75);
+}
+
 .tab-switcher {
   position: relative;
 }