*{box-sizing:border-box}body{margin:0;padding:0;font-family:Arial,sans-serif}.ui-container{position:fixed;top:0;right:0;width:600px;height:100vh;background-color:#fffffff2;box-shadow:-2px 0 10px #0003;display:flex;flex-direction:column;z-index:10;overflow:hidden;padding:10px}.show-button{position:absolute;top:10px;right:10px;z-Index:1000;background-color:#2196f3;color:#fff;border:none;border-radius:4px;padding:8px 12px;cursor:pointer}.ui-title{font-size:24px;text-align:center;margin:10px 0;color:#333}.blending-toggle-button{position:absolute;background-color:#2196f3;color:#fff;border:none;border-radius:4px;padding:8px 12px;cursor:pointer}.close-button{position:absolute;top:10px;right:10px;background-color:transparent;border:none;font-size:20px;color:#333;cursor:pointer}h2{font-size:18px;margin:0 0 10px;padding-bottom:5px;border-bottom:1px solid #eee;color:#444}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden;gap:15px}.library-column,.sequence-column{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.search-container{margin-bottom:10px}.search-input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.search-input:focus{outline:none;border-color:#2196f3}.sign-library{flex:1;overflow-y:auto;background-color:#f5f5f5;border-radius:4px;padding:5px}.sign-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin-bottom:6px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a;cursor:grab;transition:background-color .2s}.sign-item:hover{background-color:#f9f9f9}.sign-item.playing{background-color:#e3f2fd;border-left:3px solid #2196F3}.sign-item.dragging{opacity:.7;cursor:grabbing}.sign-info{flex:1;overflow:hidden}.sign-name{display:block;font-weight:700;margin-bottom:3px}.sign-description{display:block;font-size:12px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sign-controls{display:flex;gap:5px;align-items:center}.edit-button{width:30px;height:30px;border:none;border-radius:4px;background-color:#ff9800;color:#fff;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;font-size:16px}.sequence-drop-area{flex:1;overflow:hidden;display:flex;flex-direction:column;background-color:#f5f5f5;border-radius:4px;border:2px dashed #ccc;transition:border-color .2s}.sequence-drop-area:hover{border-color:#2196f3}.sequence-container{flex:1;overflow-y:auto;padding:10px}.empty-message{height:100%;display:flex;align-items:center;justify-content:center;color:#999;font-style:italic;text-align:center}.sequence-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin-bottom:8px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a;cursor:grab}.sequence-item.playing{background-color:#e3f2fd;border-left:3px solid #2196F3}.sequence-item.dragging{opacity:.7;cursor:grabbing}.sequence-item-info{flex:1;display:flex;flex-direction:column}.sequence-item-name{font-weight:700}.sequence-item-frames{font-size:12px;color:#666}.sequence-item-controls{display:flex;gap:5px}.sequence-controls{display:flex;gap:10px;margin-bottom:10px}.play-button,.control-button,.edit-button,.small-button{border:none;border-radius:4px;background-color:#2196f3;color:#fff;cursor:pointer;transition:background-color .2s}.play-button{padding:6px 12px;font-size:14px}.control-button{padding:10px;font-size:15px;font-weight:700;flex:1}.small-button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px}.play-button:hover,.play-sequence-button:hover{background-color:#1976d2}.edit-button{background-color:#ff9800}.edit-button:hover{background-color:#f57c00}.clear-sequence-button{background-color:#f44336}.clear-sequence-button:hover{background-color:#d32f2f}.record-sequence-button{background-color:#4caf50}.record-sequence-button:hover{background-color:#45a049}.remove-button{background-color:#f44336}.remove-button:hover{background-color:#d32f2f}.play-button:disabled,.control-button:disabled{background-color:#ccc;cursor:not-allowed}.frame-editor-modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:50px;z-index:1000}.frame-editor-content{background-color:#fff;border-radius:8px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #000000b3}.frame-editor-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #eee;background-color:#f8f9fa;border-radius:8px 8px 0 0}.frame-editor-header h3{margin:0;color:#333;font-size:18px}.frame-editor-close{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.frame-editor-close:hover{background-color:#e9ecef}.frame-editor-body{padding:20px}.frame-control{margin-bottom:15px}.frame-control label{display:block;margin-bottom:5px;font-weight:700;color:#333}.frame-control input[type=number]{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.frame-control input[type=number]:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px #2196f333}.frame-slider{width:100%;height:6px;border-radius:5px;background:#ddd;outline:none;opacity:.7;transition:opacity .2s;margin:10px 0}.frame-slider:hover{opacity:1}.frame-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#2196f3;cursor:pointer}.frame-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#2196f3;cursor:pointer;border:none}.frame-control label{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-weight:700;color:#333}.frame-control label span{background-color:#2196f3;color:#fff;padding:2px 8px;border-radius:12px;font-size:12px;min-width:30px;text-align:center}.frame-preview{background-color:#f8f9fa;padding:15px;border-radius:4px;margin-bottom:20px}.frame-preview p{margin:0 0 10px;color:#666;font-size:14px}.frame-preview-live p{margin:0;font-weight:700;color:#333}.auto-test-status{margin-top:8px!important;color:#ff9800!important;font-size:12px!important;font-style:italic;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.frame-editor-actions{display:flex;gap:10px;justify-content:flex-end}.frame-editor-actions button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.test-button{background-color:#ff9800;color:#fff}.test-button:hover{background-color:#f57c00}.save-button{background-color:#4caf50;color:#fff}.save-button:hover{background-color:#45a049}.cancel-button{background-color:#9e9e9e;color:#fff}.cancel-button:hover{background-color:#757575}.test-button:disabled,.save-button:disabled{background-color:#ccc;cursor:not-allowed}.notification{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:4px;color:#fff;font-weight:700;z-index:2000;animation:slideIn .3s ease-out;max-width:300px;box-shadow:0 4px 12px #0000004d}.notification-success{background-color:#4caf50}.notification-warning{background-color:#ff9800}.notification-error{background-color:#f44336}.notification-info{background-color:#2196f3}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (min-width: 1024px){.main-layout{flex-direction:row}.library-column,.sequence-column{width:50%}}@media (max-width: 768px){.app-container{width:100%;height:100vh}}.sequence-item-separator{display:flex;justify-content:space-between;align-items:center;padding:10px;margin-bottom:8px;background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;box-shadow:0 1px 3px #0000001a}.sequence-item-separator .sequence-item-info{flex:1;display:flex;flex-direction:column}.sequence-item-separator .sequence-item-name{font-weight:700;color:#333}.sequence-item-separator .sequence-item-frames{font-size:12px;color:#666}.blending-slider-container{display:flex;align-items:center;gap:10px;margin-top:8px;width:100%}.blending-slider{flex:1;height:6px;border-radius:5px;background:#ddd;outline:none;opacity:.7;transition:opacity .2s;-webkit-appearance:none}.blending-slider:hover{opacity:1}.blending-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#2196f3;cursor:pointer;transition:background-color .2s}.blending-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#2196f3;cursor:pointer;border:none;transition:background-color .2s}.blending-slider::-webkit-slider-thumb:hover{background:#1976d2}.blending-slider::-moz-range-thumb:hover{background:#1976d2}.blending-value{min-width:40px;text-align:right;font-size:12px;color:#666;font-family:monospace}