feat: tooltips, two-column timer, font selector, tray behavior, icons, readme

- Custom tooltip directive (WCAG AAA) on every button in the app
- Two-column timer layout with sticky hero and recent entries sidebar
- Timer font selector with 16 monospace Google Fonts and live preview
- UI font selector with 15+ Google Fonts
- Close-to-tray and minimize-to-tray settings
- New app icons (no-glow variants), platform icon set
- Mini timer pop-out window
- Favorites strip with drag-reorder and inline actions
- Comprehensive README with feature documentation
- Remove tracked files that belong in gitignore

src/styles/main.css

@@ -26,6 +26,7 @@
   --color-status-running: #34D399;
   --color-status-warning: #EAB308;
   --color-status-error: #EF4444;
+  --color-status-error-text: #F87171;
   --color-status-info: #3B82F6;
 
   /* Fonts */
@@ -53,7 +54,7 @@
   --color-accent: #8B5CF6;
   --color-accent-hover: #7C3AED;
   --color-accent-muted: rgba(139, 92, 246, 0.25);
-  --color-accent-text: #A78BFA;
+  --color-accent-text: #C4B5FD;
 }
 [data-accent="green"] {
   --color-accent: #10B981;
@@ -91,6 +92,7 @@
   --color-text-tertiary: #57524D;
   --color-border-subtle: #E7E5E4;
   --color-border-visible: #D6D3D1;
+  --color-status-error-text: #B91C1C;
 }
 
 @layer base {
@@ -231,6 +233,11 @@
   animation: toast-exit 150ms ease-in forwards;
 }
 
+@keyframes toast-progress {
+  from { width: 100%; }
+  to { width: 0%; }
+}
+
 /* Pulse animation for timer colon */
 @keyframes pulse-colon {
   0%, 100% { opacity: 0.4; }
@@ -538,6 +545,26 @@
   animation: none !important;
 }
 
+.reduce-motion .btn-primary:hover,
+.reduce-motion .btn-primary:active,
+.reduce-motion .btn-icon:active,
+.reduce-motion .btn-icon-delete:active,
+.reduce-motion .card-hover:hover,
+.reduce-motion .card-hover:active {
+  transform: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn-primary:hover,
+  .btn-primary:active,
+  .btn-icon:active,
+  .btn-icon-delete:active,
+  .card-hover:hover,
+  .card-hover:active {
+    transform: none !important;
+  }
+}
+
 @media (prefers-contrast: more) {
   :root {
     --color-text-secondary: #D0D0C8;
@@ -558,3 +585,68 @@
     outline: 2px solid Highlight;
   }
 }
+
+@media print {
+  header,
+  nav,
+  .fixed,
+  .sticky,
+  [role="tooltip"],
+  [role="status"],
+  .animate-pulse-dot,
+  .animate-float,
+  .sr-only-focusable,
+  button[aria-label="Minimize"],
+  button[aria-label="Maximize"],
+  button[aria-label="Restore"],
+  button[aria-label="Close"] {
+    display: none !important;
+  }
+
+  body,
+  [data-theme="dark"],
+  [data-theme="light"] {
+    background: white !important;
+    color: black !important;
+  }
+
+  * {
+    color: black !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  th, td {
+    border: 1px solid #ccc;
+    padding: 4px 8px;
+  }
+
+  h1, h2, h3 {
+    page-break-after: avoid;
+  }
+
+  tr {
+    page-break-inside: avoid;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.75em;
+    color: #666 !important;
+  }
+
+  main {
+    width: 100% !important;
+    overflow: visible !important;
+  }
+
+  #app {
+    overflow: visible !important;
+    height: auto !important;
+  }
+}