.flex-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;width:100%;max-width:1200px;margin:0 auto}.input-preview{border:1px solid #ccc;border-radius:4px;padding:0rem .5rem;min-height:2rem;font-family:inherit;font-size:3rem;line-height:1.5;background-color:#fff;cursor:default;-webkit-user-select:none;user-select:none;outline:none;transition:border-color .2s ease-in-out;display:flex;flex-wrap:wrap;align-items:center;width:100%;min-width:200px}.input-preview:focus{outline:none;box-shadow:none}.input-preview img{vertical-align:middle;margin:2px;height:70px;width:auto}label{font-weight:700;margin-bottom:.25rem}.images-list-container{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem}.images-list-container img{height:70px;width:auto;cursor:pointer}.button-container{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.export-button,.convert-button{padding:12px 24px;font-size:16px;font-weight:600;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease-in-out;min-width:200px;text-align:center;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;justify-content:center;gap:8px}.export-button .button-icon,.convert-button .button-icon{font-size:18px;width:20px}.export-button:hover,.convert-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.export-button:active,.convert-button:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.export-button:focus,.convert-button:focus{outline:none;box-shadow:0 0 0 3px #ffffff4d}.export-button{background:linear-gradient(135deg,#ff4d4d,#c00)}.export-button:hover{background:linear-gradient(135deg,#c00,#900)}.convert-button{background:linear-gradient(135deg,#4d79ff,#03c)}.convert-button:hover{background:linear-gradient(135deg,#03c,#002699)}.mode-toggle-button{background-color:#28a745}.mode-toggle-button:hover{background-color:#218838}.size-control{display:flex;align-items:center;gap:10px;margin:10px 0}.size-control input[type=range]{width:200px}.sf6-input-button{background-color:#2c3e50;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;position:relative}.sf6-input-button:hover{background-color:#34495e}.sf6-input-button:hover .sf6-input-tooltip{opacity:1;visibility:visible;transform:translate(-50%,10px)}.sf6-input-button.active{background-color:#27ae60}.sf6-input-button.active:hover{background-color:#2ecc71}.sf6-input-button .button-icon{font-size:1.2em}.sf6-input-button .sf6-input-tooltip{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);background-color:#2c3e50;color:#fff;padding:16px;border-radius:8px;width:320px;font-size:14px;line-height:1.5;opacity:0;visibility:hidden;transition:all .2s ease;z-index:1000;box-shadow:0 4px 12px #00000026;pointer-events:none}.sf6-input-button .sf6-input-tooltip:after{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);border-width:8px;border-style:solid;border-color:transparent transparent #2c3e50 transparent;transform:translate(-50%) rotate(180deg)}.sf6-input-button .sf6-input-tooltip .tooltip-title{font-weight:700;margin-bottom:12px;color:#3498db;font-size:16px}.sf6-input-button .sf6-input-tooltip .tooltip-section{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}.sf6-input-button .sf6-input-tooltip .tooltip-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.sf6-input-button .sf6-input-tooltip .tooltip-section strong{color:#3498db;display:block;margin-bottom:6px}.sf6-input-button .sf6-input-tooltip .key-combo{background-color:#ffffff1a;padding:2px 6px;border-radius:4px;font-family:monospace;margin:0 2px;font-size:13px}.sf6-controls{display:flex;gap:8px;align-items:center}.settings-button{background-color:#2c3e50;color:#fff;border:none;padding:10px;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.settings-button:hover{background-color:#34495e}.settings-button .button-icon{font-size:1.2em}.settings-modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.settings-content{background-color:#fff;padding:24px;border-radius:8px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 12px #00000026}.settings-content h2{margin:0 0 24px;color:#2c3e50;font-size:24px}.settings-content h3{margin:0 0 16px;color:#34495e;font-size:18px}.settings-section{margin-bottom:24px}.settings-section:last-child{margin-bottom:0}.control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.control-item{display:flex;flex-direction:column;gap:8px}.control-item span{color:#7f8c8d;font-size:14px}.control-key{background-color:#f5f6fa;border:2px solid #dcdde1;padding:8px 12px;border-radius:4px;font-family:monospace;font-size:14px;cursor:pointer;transition:all .2s ease;text-align:center;min-width:100px}.control-key:hover{background-color:#dcdde1}.control-key.recording{background-color:#3498db;color:#fff;border-color:#2980b9;animation:pulse 1.5s infinite}.close-settings{background-color:#2c3e50;color:#fff;border:none;padding:12px 24px;border-radius:4px;cursor:pointer;font-size:16px;margin-top:24px;transition:all .2s ease}.close-settings:hover{background-color:#34495e}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}