improved a lot of things

packages/app/src/app/globals.css

@@ -16,3 +16,24 @@ body {
   font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
   background: #f5f5f5;
 }
+
+/* ── Accessible focus indicators ────────────────────────────────────────────
+   Inline styles set outline:none to suppress browser defaults, but without a
+   replacement this breaks keyboard navigation. :focus-visible adds a visible
+   ring only for keyboard focus (not mouse clicks) across the entire app.
+   The ring colour adapts to context: blue for light-bg pages (#0066FF),
+   and a lighter blue for dark-bg panels (#3385FF / canvas inspector etc.).
+   We use !important to override inline outline:none intentionally.          */
+
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid #0066FF !important;
+  outline-offset: 2px !important;
+}
+
+/* Canvas panels sit on a dark background — the ring matches the panel accent */
+.dark-panel input:focus-visible,
+.dark-panel textarea:focus-visible {
+  outline-color: #3385FF !important;
+}

packages/app/src/app/onboarding/page.tsx

@@ -47,7 +47,7 @@ export default function OnboardingPage() {
 
   return (
     <main style={{
-      minHeight: '100vh',
+      minHeight: '100dvh',
       display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
       background: '#FAFAFA',
       fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
@@ -98,7 +98,7 @@ export default function OnboardingPage() {
               width: '100%', boxSizing: 'border-box',
               padding: '11px 13px', fontSize: '0.9375rem',
               border: '1px solid rgba(0,0,0,0.12)', borderRadius: 9,
-              outline: 'none', color: '#0A0A0A', background: '#FFFFFF',
+              color: '#0A0A0A', background: '#FFFFFF',
               fontFamily: 'inherit',
             }}
             onFocus={e => (e.currentTarget.style.borderColor = '#0066FF')}

packages/app/src/app/workspace/[wid]/page.tsx

@@ -46,7 +46,7 @@ export default async function WorkspacePage({ params }: { params: Promise<{ wid:
   const projects = (projectsData ?? []) as Project[];
 
   return (
-    <div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
+    <div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
       <AppHeader breadcrumbs={[
         { label: 'Workspaces', href: '/workspaces' },
         { label: workspace.name },

packages/app/src/app/workspace/[wid]/project/new/page.tsx

@@ -50,7 +50,7 @@ export default function NewProjectPage({ params }: { params: Promise<{ wid: stri
     width: '100%', boxSizing: 'border-box' as const,
     padding: '10px 12px', fontSize: '0.9375rem',
     border: '1px solid rgba(0,0,0,0.12)', borderRadius: 8,
-    outline: 'none', color: '#0A0A0A', background: '#FFFFFF',
+    color: '#0A0A0A', background: '#FFFFFF',
     fontFamily: 'inherit',
   };
 
@@ -61,7 +61,7 @@ export default function NewProjectPage({ params }: { params: Promise<{ wid: stri
   };
 
   return (
-    <div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
+    <div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
       <AppHeader breadcrumbs={[
         { label: 'Workspaces', href: '/workspaces' },
         { label: 'Workspace', href: `/workspace/${wid}` },

packages/app/src/app/workspace/[wid]/settings/page.tsx

@@ -37,7 +37,7 @@ export default async function WorkspaceSettingsPage({ params }: { params: Promis
   const memberRole = (member as { role: string }).role;
 
   return (
-    <div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
+    <div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
       <AppHeader breadcrumbs={[
         { label: 'Workspaces', href: '/workspaces' },
         { label: workspace.name, href: `/workspace/${wid}` },

packages/app/src/app/workspaces/new/page.tsx

@@ -35,7 +35,7 @@ export default function NewWorkspacePage() {
   }
 
   return (
-    <div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
+    <div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
       <AppHeader breadcrumbs={[{ label: 'Workspaces', href: '/workspaces' }, { label: 'New workspace' }]} />
 
       <main style={{ maxWidth: 480, margin: '64px auto', padding: '0 24px' }}>
@@ -61,7 +61,7 @@ export default function NewWorkspacePage() {
                 width: '100%', boxSizing: 'border-box',
                 padding: '10px 12px', fontSize: '0.9375rem',
                 border: '1px solid rgba(0,0,0,0.12)', borderRadius: 8,
-                outline: 'none', color: '#0A0A0A', background: '#FFFFFF',
+                color: '#0A0A0A', background: '#FFFFFF',
                 fontFamily: 'inherit',
               }}
               onFocus={e => (e.currentTarget.style.borderColor = '#0066FF')}

packages/app/src/app/workspaces/page.tsx

@@ -37,7 +37,7 @@ export default async function WorkspacesPage() {
   if (workspaces.length === 0) redirect('/onboarding');
 
   return (
-    <div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
+    <div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
       <AppHeader />
 
       <main style={{ maxWidth: 960, margin: '0 auto', padding: '48px 24px' }}>

packages/app/src/components/canvas/Canvas.tsx

@@ -350,6 +350,8 @@ function ZonePromptOverlay({
               fontFamily: 'inherit', resize: 'none', outline: 'none',
               marginBottom: 8,
             }}
+            onFocus={e => (e.currentTarget.style.borderColor = '#3385FF')}
+            onBlur={e => (e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)')}
           />
           {status === 'error' && (
             <p style={{ fontSize: '0.625rem', color: '#FF8080', margin: '0 0 6px' }}>Request failed — try again</p>

packages/app/src/components/chrome/AppChrome.tsx

@@ -110,6 +110,8 @@ export function AppChrome({ workspaceId, projectId, workspaceName, projectName }
           borderBottom: '1px solid rgba(255,255,255,0.06)',
           display: 'flex', alignItems: 'center',
           padding: '0 14px', gap: 0,
+          zIndex: 10,
+          position: 'relative',
         }}>
           {/* Logo */}
           <Link href="/workspaces" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', marginRight: 4 }}>

packages/app/src/components/inspector/Inspector.tsx

@@ -40,6 +40,7 @@ export function Inspector() {
 
   return (
     <div
+      className="dark-panel"
       style={{
         gridColumn: 3,
         gridRow: 2,
@@ -79,8 +80,8 @@ export function Inspector() {
         ))}
       </div>
 
-      {/* Content */}
+      {/* Content — minHeight:0 is required so this flex child can actually shrink and scroll */}
-      <div style={{ flex: 1, overflow: 'auto' }}>
+      <div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
         {!selectedArtboardId ? (
           <div
             style={{
@@ -373,17 +374,19 @@ function PropsTab({
             marginTop: 8,
             padding: '8px 10px',
             background: 'rgba(0,0,0,0.35)',
-            border: '1px solid rgba(255,255,255,0.06)',
+            border: '1px solid rgba(255,255,255,0.08)',
             borderRadius: 6,
             maxHeight: 220,
-            overflow: 'auto',
+            overflowY: 'auto',
             fontSize: '0.5875rem',
             fontFamily: "'Inter', sans-serif",
             color: 'rgba(255,255,255,0.62)',
             lineHeight: 1.65,
             whiteSpace: 'pre-wrap',
             wordBreak: 'break-word',
-          }}>
+            scrollbarWidth: 'thin',
+            scrollbarColor: 'rgba(255,255,255,0.18) transparent',
+          } as React.CSSProperties}>
             {driftReport}
           </div>
         )}

packages/app/src/components/navigator/ArtboardNavigator.tsx

@@ -81,6 +81,7 @@ export function ArtboardNavigator() {
 
   return (
     <div
+      className="dark-panel"
       style={{
         gridColumn: 1,
         gridRow: 2,

packages/app/src/components/shell/ProjectSettingsForm.tsx

@@ -35,7 +35,6 @@ const INPUT: React.CSSProperties = {
   padding: '9px 12px',
   border: '1px solid rgba(0,0,0,0.12)',
   borderRadius: 9,
-  outline: 'none',
   fontFamily: "'Inter', -apple-system, sans-serif",
   color: '#0A0A0A',
   background: '#FAFAFA',

packages/app/src/components/shell/WorkspaceSettingsForm.tsx

@@ -31,7 +31,6 @@ const INPUT: React.CSSProperties = {
   padding: '9px 12px',
   border: '1px solid rgba(0,0,0,0.12)',
   borderRadius: 9,
-  outline: 'none',
   fontFamily: "'Inter', -apple-system, sans-serif",
   color: '#0A0A0A',
   background: '#FAFAFA',