.sct-transposer-container{margin:20px 0;padding:15px;background:linear-gradient(145deg,#f3f4f6,#fff);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:1px solid #e5e7eb}.sct-transposer{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.sct-transposer label{font-weight:600;color:#374151;font-size:14px;margin:0}#sct-key-select{padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#374151;font-size:14px;cursor:pointer;min-width:150px;max-width:200px;transition:all .2s ease;height:40px;box-sizing:border-box;width:auto}#sct-key-select option{padding:4px 8px;font-size:13px;line-height:1.3}#sct-key-select:hover{border-color:#9ca3af}#sct-key-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);width:auto}#sct-reset-btn{padding:8px 16px;background:#6b7280;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}#sct-reset-btn:hover{background:#4b5563;transform:translateY(-1px)}#sct-reset-btn:active{transform:translateY(0)}.sct-chord{color:#f60 !important;cursor:pointer;transition:all .2s ease;padding:1px 2px;border-radius:3px}.sct-chord:hover{background-color:rgba(255,102,0,.1);transform:scale(1.05)}.sct-chord.transposed{background-color:rgba(59,130,246,.1);color:#3b82f6 !important}@media (max-width:768px){.sct-transposer-container{margin:15px 0;padding:12px;border-radius:8px}.sct-transposer{flex-direction:column;align-items:stretch;gap:12px}.sct-transposer label{text-align:center;font-size:13px;margin-bottom:4px}#sct-key-select{min-width:auto;width:100% !important;max-width:100% !important;padding:10px 12px;font-size:14px;height:44px;box-sizing:border-box}#sct-key-select option{padding:2px 4px;font-size:12px;line-height:1.2}#sct-reset-btn{width:100%;padding:10px 16px;font-size:14px}}@media (max-width:480px){.sct-transposer-container{margin:10px 0;padding:10px}.sct-transposer{gap:10px}.sct-transposer label{font-size:12px}#sct-key-select{padding:8px 10px;font-size:13px;height:40px;box-sizing:border-box;width:100% !important;max-width:100% !important}#sct-key-select option{padding:1px 3px;font-size:11px;line-height:1.1}#sct-reset-btn{padding:8px 12px;font-size:13px}}