body { background:#f5f7fb;font-family:system-ui, Poppins, -apple-system, BlinkMacSystemFont, sans-serif;margin:0;padding:0;} #morse-audio-decoder { max-width:1100px;margin:40px auto;background:#ffffff;border-radius:20px;border:1px solid #e2e8f0;box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);padding:32px;box-sizing:border-box;} #morse-audio-decoder h1, #morse-audio-decoder .morse-instruction { text-align:center;margin-top:0;margin-bottom:16px;color:#000000;font-size:27px;font-weight:500;} .section { background:#ffffff;border:1px solid #e3e8f0;border-radius:10px;padding:16px;margin-bottom:16px;} input, select, textarea { border:1px solid #cbd5e1;border-radius:10px;padding:10px 14px;font-size:14px;width:auto;box-sizing:border-box;font-family:inherit;background-color:#f8fafc;transition:all 0.2s ease;} input:focus, select:focus, textarea:focus { outline:none;border-color:#4fc3ff;background-color:#ffffff;box-shadow:0 0 0 3px rgba(79, 195, 255, 0.15);} textarea { width:100%;min-height:140px;resize:vertical;display:block;} button { background:#4fc3ff;color:#000;border:none;border-radius:10px;padding:0 16px;min-width:110px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.2s ease, transform 0.1s ease;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;} button:hover { background:#38b6ff;box-shadow:0 4px 6px rgba(79, 195, 255, 0.25);transform:translateY(-1px);} button:active { transform:translateY(0) scale(0.98);box-shadow:0 2px 4px rgba(79, 195, 255, 0.15);} button.stop, #stopBtn, #stopFileBtn { background:#e5e7eb;} button.stop:hover, #stopBtn:hover, #stopFileBtn:hover { background:#d1d5db;} .button-row, .controls, .audio-controls { display:flex;flex-wrap:wrap;gap:15px;} .settings { display:flex;flex-wrap:wrap;gap:16px;align-items:center;} .setting-item { display:flex;flex-direction:column;gap:6px;flex:1 1 140px;} .setting-item input { width:100%;} .settings label { font-size:13px;font-weight:600;color:#334155;} #output { font-family:Poppins, sans-serif;background:#f8fafc;} canvas { width:100%;height:160px;background:#000;border-radius:12px;display:block;} .chart-controls { display:flex;gap:15px;} @media (max-width:768px) { #morse-audio-decoder { padding:16px;margin:15px;} .button-row, .controls, .audio-controls { gap:10px;} button { flex:1 1 100%;height:44px;min-width:unset;} .settings { flex-direction:column;align-items:stretch;gap:12px;} .setting-item { flex-direction:row;justify-content:space-between;align-items:center;flex:none;width:100%;} .setting-item label { flex:1;margin-right:12px;font-size:14px;text-align:left;} .setting-item input { width:110px;flex:0 0 110px;} } body, h1, p, label, textarea, input, select, option { color:#000000;font-family:Poppins, system-ui, sans-serif;}