fix(editor): keep textarea scrollable past MAX_ROWS + theme the clock colour

Address gemini's PR #93 findings:

- overflow-y-hidden meant content past MAX_ROWS was unreachable
  (no scroll, no expand). Switch to overflow-y-auto with the
  scrollbar visually hidden so wheel/keyboard scrolling still works
  and the mirror layer stays pixel-aligned (a visible scrollbar
  would shift the textarea's text origin and break the highlight).
- Hardcoded `#67c8e0` clock-marker colour replaced with a themed
  --color-info CSS var. Light + dark palettes get distinct values
  so the clock highlight stays readable on both. Picker dropdown
  consumes the same token via `text-info`.

Author: u8array

src/components/Properties/TemplateContentInput.tsx

@@ -153,14 +153,19 @@ export function TemplateContentInput({
           ) : s.kind === "var" ? (
             <span key={i} className="text-accent">{s.text}</span>
           ) : (
-            <span key={i} className="text-[#67c8e0]">{s.text}</span>
+            <span key={i} className="text-info">{s.text}</span>
           ),
         )}
         {value.endsWith("\n") ? " " : ""}
       </div>
       <textarea
         ref={taRef}
-        className={`${SHARED_CLS} relative block resize-none overflow-y-hidden caret-text focus:border-accent focus:outline-none`}
+        // overflow-y-auto so content beyond MAX_ROWS stays reachable;
+        // scrollbar visually hidden because the mirror layer doesn't
+        // reserve space for one — a visible scrollbar would shift the
+        // textarea's text origin and misalign the colour highlight.
+        // Wheel + keyboard scrolling stay functional via syncScroll.
+        className={`${SHARED_CLS} relative block resize-none overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden caret-text focus:border-accent focus:outline-none`}
         style={{ color: "transparent", background: "transparent" }}
         value={value}
         maxLength={maxLength}
@@ -209,7 +214,7 @@ export function TemplateContentInput({
               className="block w-full text-left px-2 py-1 text-xs font-mono text-text hover:bg-surface-2 transition-colors"
               onClick={() => insertMarker(`clock:${token}`)}
             >
-              <span className="text-[#67c8e0]">«clock:{token}»</span>{" "}
+              <span className="text-info">«clock:{token}»</span>{" "}
               <span className="text-muted">{t.app[labelKey]}</span>
             </button>
           ))}

src/index.css

@@ -24,6 +24,10 @@
   --color-muted:     #666666;
   --color-accent:    #f59e0b;
   --color-accent-dim:#78490a;
+  /* Secondary highlight, e.g. clock-token markers in the content
+     editor — distinct from accent so the editor can colour-code
+     marker families without collision. */
+  --color-info:      #67c8e0;
 
   --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
   --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
@@ -43,6 +47,7 @@
   --color-muted:     #52525b;
   --color-accent:    #d97706;
   --color-accent-dim:#fef3c7;
+  --color-info:      #0e7490;
 }
 
 *, *::before, *::after {