:root{--color-success: #4caf50;--color-warning: #ffc107;--color-error: #f44336;--border-radius: 4px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;color:#333;max-width:800px;margin:0 auto;padding:20px;background-color:#f5f5f5}.container{background:#fff;padding:2rem;border-radius:var(--border-radius);box-shadow:0 2px 4px #0000001a}h1{color:#2c3e50;margin-top:0;text-align:center}.midi-selector{margin:2rem 0}.selector-row{display:flex;flex-direction:row;justify-content:space-between;gap:2rem}.input-selector,.output-selector{display:flex;flex-direction:column;gap:.5rem;flex:1}.select-with-indicator{display:flex;align-items:center;position:relative}label{font-weight:600;font-size:.85rem;color:#2c3e50;margin-bottom:.25rem}select{padding:.75rem;border:1px solid #ddd;border-radius:var(--border-radius);font-size:1rem;transition:border-color .3s ease;width:100%;background-color:#fff;flex-grow:1}select:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.status-indicator{display:inline-block;margin-left:10px;width:16px;height:16px;border-radius:50%;background-color:#ddd;transition:background-color .3s ease;flex-shrink:0}.connected .status-indicator{background-color:var(--color-success);box-shadow:0 0 0 2px var(--color-success)}.connecting .status-indicator{background-color:var(--color-warning);box-shadow:0 0 0 2px var(--color-warning);animation:pulse 1s infinite}.connecting select{border-color:var(--color-warning)}.disconnected .status-indicator{background-color:var(--color-error);box-shadow:0 0 0 2px var(--color-error)}.disconnected select{border-color:var(--color-error)}.connected select{border-color:var(--color-success)}.connection-status{margin-top:2rem;padding:1rem;border-radius:var(--border-radius);background-color:#f8f9fa;text-align:center}#midi-access-status{font-weight:600}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}@media (max-width: 600px){.midi-selector{gap:1rem}.status-indicator{right:-25px;width:16px;height:16px}}