feat(ui): add mobile responsiveness and favicon

- Add comprehensive responsive styles for tablets (1024px), phones (768px, 480px)
- Add touch optimization media query for larger tap targets
- Add SVG favicon with lightning bolt icon
- Add meta description and theme-color tags
- Add dynamic page title updates based on session/timer state
- Update README with keyboard shortcuts documentation

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

src/web/public/styles.css

@@ -752,7 +752,22 @@ body {
   border-top-color: #1a1a1a;
 }
 
-/* Responsive */
+/* Responsive - Tablets */
+@media (max-width: 1024px) {
+  .main {
+    grid-template-columns: 300px 1fr;
+  }
+
+  .quick-start-section {
+    padding: 1rem;
+  }
+
+  .cases-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Responsive - Small Tablets / Large Phones */
 @media (max-width: 768px) {
   .main {
     grid-template-columns: 1fr;
@@ -762,16 +777,36 @@ body {
   .control-panel {
     border-right: none;
     border-bottom: 1px solid var(--border);
+    max-height: 50vh;
+    overflow-y: auto;
   }
 
   .form-row {
     grid-template-columns: 1fr;
   }
 
+  .header {
+    padding: 0.75rem 1rem;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .header-left {
+    gap: 0.75rem;
+  }
+
+  .logo {
+    font-size: 1.1rem;
+  }
+
   .header-stats {
     display: none;
   }
 
+  .connection-status {
+    font-size: 0.65rem;
+  }
+
   .sessions-panel {
     position: relative;
     max-height: none;
@@ -779,11 +814,225 @@ body {
 
   .sessions-list {
     flex-direction: column;
+    padding: 0 1rem 1rem;
   }
 
   .session-card {
     width: 100%;
   }
+
+  .timer-banner {
+    padding: 1rem;
+  }
+
+  .timer-value {
+    font-size: 2rem;
+  }
+
+  .timer-meta {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .output-panel {
+    padding: 1rem;
+  }
+
+  .terminal-container {
+    min-height: 300px;
+    border-radius: 8px;
+  }
+
+  .quick-start-controls {
+    flex-direction: column;
+  }
+
+  .btn-quick-start {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .tabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 0.5rem;
+  }
+
+  .tab {
+    white-space: nowrap;
+    padding: 0.5rem 1rem;
+  }
+
+  .respawn-banner {
+    flex-wrap: wrap;
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+  }
+
+  .respawn-step {
+    width: 100%;
+    order: 3;
+  }
+
+  .modal-content {
+    width: 95%;
+    max-height: 90vh;
+  }
+
+  .modal-body {
+    max-height: 70vh;
+  }
+}
+
+/* Responsive - Phones */
+@media (max-width: 480px) {
+  .header {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .logo {
+    font-size: 1rem;
+  }
+
+  .connection-status span:last-child {
+    display: none;
+  }
+
+  .control-panel {
+    padding: 1rem;
+    max-height: 40vh;
+  }
+
+  .output-panel {
+    padding: 0.75rem;
+  }
+
+  .terminal-container {
+    min-height: 250px;
+    border-radius: 6px;
+  }
+
+  .quick-start-section {
+    padding: 0.875rem;
+    border-radius: 8px;
+  }
+
+  .quick-start-header {
+    margin-bottom: 0.5rem;
+  }
+
+  .quick-start-title {
+    font-size: 0.9rem;
+  }
+
+  .form-group label {
+    font-size: 0.7rem;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    padding: 0.625rem 0.875rem;
+    font-size: 16px; /* Prevents iOS zoom on focus */
+  }
+
+  select {
+    padding: 0.625rem 2rem 0.625rem 0.75rem;
+    font-size: 16px; /* Prevents iOS zoom on focus */
+  }
+
+  .btn {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+  }
+
+  .btn-large {
+    padding: 1rem 1.25rem;
+  }
+
+  .sessions-header {
+    padding: 0.5rem 1rem;
+  }
+
+  .sessions-list {
+    padding: 0 0.75rem 0.75rem;
+  }
+
+  .session-card-header {
+    padding: 0.75rem;
+  }
+
+  .session-output {
+    height: 100px;
+    padding: 0.5rem;
+  }
+
+  .timer-banner {
+    padding: 0.75rem 1rem;
+  }
+
+  .timer-value {
+    font-size: 1.75rem;
+  }
+
+  .timer-info {
+    gap: 0.5rem;
+  }
+
+  .toast-container {
+    top: auto;
+    bottom: 1rem;
+    right: 0.5rem;
+    left: 0.5rem;
+  }
+
+  .toast {
+    padding: 0.75rem 1rem;
+    font-size: 0.8rem;
+  }
+}
+
+/* Touch optimizations */
+@media (hover: none) and (pointer: coarse) {
+  .btn {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  .btn-sm {
+    min-height: 36px;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .btn-xs {
+    min-height: 32px;
+    padding: 0.375rem 0.625rem;
+    font-size: 0.7rem;
+  }
+
+  .tab {
+    min-height: 44px;
+    padding: 0.75rem 1.25rem;
+  }
+
+  .case-card {
+    padding: 1rem;
+  }
+
+  .session-card:hover {
+    transform: none;
+  }
+
+  .case-card:hover {
+    transform: none;
+  }
+
+  .modal-close {
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 /* Loading state */