/* Warm hero-responder UI with code-native visuals */body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f8f9fa; color: #343a40; }header { background-color: #007bff; color: white; padding: 15px; text-align: center; }header a { color: white; text-decoration: none; font-weight: bold; }main { display: flex; justify-content: center; align-items: center; height: calc(100vh - 60px); padding: 20px; }/* Scene/Cord/Person/Report visuals */.scene { position: relative; width: 100%; max-width: 800px; margin: auto; }.cord { background-color: #e9ecef; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }.person { display: flex; align-items: center; margin-bottom: 15px; }.person img { border-radius: 50%; width: 40px; height: 40px; object-fit: cover; margin-right: 10px; }/* Mobile/touch controls */button, .interactive-element { min-width: 44px; min-height: 44px; padding: 10px; font-size: 16px; cursor: pointer; border: none; background-color: #007bff; color: white; border-radius: 5px; margin: 5px; }button:hover, .interactive-element:hover { background-color: #0056b3; }/* Keyboard focus */button:focus, .interactive-element:focus { outline: 2px solid #0056b3; }/* High contrast */.high-contrast-mode button, .high-contrast-mode .interactive-element { background-color: black; color: white; }/* Reduced motion */@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }/* Safe areas */@supports (padding: env(safe-area-inset-top)) { body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } }