feat: style the UI with Oat and make the empty canvas a click-to-load drop zone

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/App.svelte

@@ -19,6 +19,11 @@
     const file = e.dataTransfer?.files[0];
     if (file) app.loadFile(file);
   }
+
+  function onFile(e: Event & { currentTarget: HTMLInputElement }) {
+    const file = e.currentTarget.files?.[0];
+    if (file) app.loadFile(file);
+  }
 </script>
 
 <div class="layout">
@@ -29,7 +34,11 @@
     {#if app.image}
       <ImageCanvas {app} />
     {:else}
-      <p class="empty">Drop a photo of a scrap piece here, or use “Load photo”.</p>
+      <label class="dropzone">
+        <input type="file" accept="image/*" hidden onchange={onFile} />
+        <strong>Drop a photo of a scrap piece here</strong>
+        <span>or click to choose a file</span>
+      </label>
     {/if}
   </main>
 </div>
@@ -37,8 +46,6 @@
 <style>
   :global(body) {
     margin: 0;
-    font-family: system-ui, sans-serif;
-    color: #222;
   }
   .layout {
     display: grid;
@@ -47,16 +54,33 @@
   }
   aside {
     overflow-y: auto;
-    border-right: 1px solid #ddd;
+    border-right: 1px solid var(--border);
     padding: 16px;
   }
   main {
     position: relative;
     background: #2b2b2b;
   }
-  .empty {
+  .dropzone {
+    position: absolute;
+    inset: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    border: 2px dashed #555;
+    border-radius: 12px;
     color: #bbb;
-    text-align: center;
-    margin-top: 40vh;
+    cursor: pointer;
+    transition: border-color 0.15s, background-color 0.15s;
+  }
+  .dropzone:hover {
+    border-color: #888;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .dropzone span {
+    color: #888;
+    font-size: 0.9rem;
   }
 </style>