:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow:hidden;background-color:#1a1a1a;color:#eee}.App{width:100vw;height:100vh}.top-ui-container{position:absolute;top:10px;left:10px;z-index:10;background-color:#0009;padding:10px 15px;border-radius:8px;max-width:400px}.instructions h3{margin-top:0;margin-bottom:8px;color:#fff}.instructions p{margin-bottom:10px;font-size:.9em;color:#ccc}button{background:#4a4a4a;color:#fff;border:1px solid #666;padding:6px 12px;border-radius:4px;cursor:pointer;margin-right:5px;transition:background-color .2s ease,border-color .2s ease;font-size:.9em}button:hover{background:#5a5a5a;border-color:#888}button:active{background:#3a3a3a}input[type=number],input[type=text],select{background:#282828;color:#fff;border:1px solid #555;border-radius:4px;padding:6px 8px;margin:0 5px;font-size:.9em}input:focus,select:focus{outline:none;border-color:#888;box-shadow:0 0 5px #88888880}.time-slider-container{position:absolute;right:15px;width:550px;max-width:90vw;background-color:#0a0a0ad9;padding:5px;border-radius:8px;color:#fff;z-index:10;border:1px solid #444;box-shadow:0 4px 15px #0006}.time-slider-container h3,.time-slider-container h4{margin-top:0;margin-bottom:10px;color:#fff;border-bottom:1px solid #555;padding-bottom:5px}.time-slider-container h4{margin-top:15px}.time-range-slider{width:100%;cursor:pointer;height:10px;background:#444;border-radius:5px;-moz-appearance:none;appearance:none;-webkit-appearance:none}.time-range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#eee;border-radius:50%;cursor:pointer;border:1px solid #aaa}.time-range-slider::-moz-range-thumb{width:16px;height:16px;background:#eee;border-radius:50%;cursor:pointer;border:1px solid #aaa}.time-labels{display:flex;justify-content:space-between;font-size:.8em;color:#aaa;margin-top:5px}.playback-controls{margin-bottom:15px;display:flex;align-items:center}.playback-controls label{margin-left:20px;font-size:.9em;color:#ccc}.duration-input{width:60px}.timeline-visualization{position:relative;height:35px;background-color:#2a2a2a;border-radius:4px;overflow:hidden;border:1px solid #444}.timeline-entry-block{position:absolute;top:0;height:100%;border-radius:3px;opacity:.8;box-sizing:border-box;border:1px solid rgba(0,0,0,.2)}.timeline-entry-block:hover{opacity:1}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background-color:#ff4d4d;pointer-events:none;box-shadow:0 0 5px #ff4d4db3}.add-animation-form{margin-bottom:20px;padding:10px;background-color:#ffffff08;border-radius:5px}.add-animation-form select{min-width:120px}.add-animation-form input[type=number]{width:100px}.animation-list{max-height:350px;overflow-y:auto;border-top:1px solid #444;margin-top:15px}.animation-list table{width:100%;border-collapse:collapse;font-size:.9em}.animation-list th,.animation-list td{padding:8px 10px;text-align:left;border-bottom:1px solid #383838}.animation-list th{background-color:#ffffff0d;color:#ddd;position:sticky;top:0}.animation-list tbody tr:hover{background-color:#ffffff14}.animation-list p{text-align:center;color:#888;padding:15px}.animation-list::-webkit-scrollbar{width:8px}.animation-list::-webkit-scrollbar-track{background:#2a2a2a;border-radius:4px}.animation-list::-webkit-scrollbar-thumb{background-color:#555;border-radius:4px;border:2px solid #2a2a2a}.animation-list::-webkit-scrollbar-thumb:hover{background-color:#777}.time-slider-container{background:#1e1e2ecc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:20px;border-radius:25px;border:1px solid rgba(255,255,255,.1);-webkit-user-select:none;user-select:none;outline:none;position:relative;max-height:100%;box-shadow:0 8px 32px #0000004d}.time-slider-container:focus-within{border-color:#666}.play-pause-button{min-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px 20px;border-radius:20px;border:none;background-color:#333;color:#fff;cursor:pointer;font-weight:700;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 15px #0003}.play-pause-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.play-pause-button.playing{background:linear-gradient(90deg,#ff416c,#ff4b2b)}.play-pause-button.paused{background:linear-gradient(90deg,#11998e,#38ef7d)}.compact-controls{display:flex;flex-direction:column;gap:8px}.compact-slider-row{width:100%}.compact-actions-row{display:flex;align-items:center;gap:15px;justify-content:space-between}.show-button-compact{position:absolute;top:-30px;right:0;padding:4px 8px;font-size:12px;background:#444;color:#fff;border:1px solid #666;border-radius:4px;cursor:pointer}.show-button-compact:hover{background:#555}.keyboard-hint{font-size:11px;color:#888;font-style:italic}.play-pause-button.compact{min-width:150px;font-size:.9em;padding:4px 10px}.time-range-slider.compact{height:12px}.time-slider-container.hide-mode{padding:8px 12px;background-color:#1e1e1ee6;border:1px solid #555;margin-top:40px}.frame-display{font-weight:700;margin:0 10px;background-color:#0000004d;padding:3px 6px;border-radius:3px;min-width:100px;text-align:center}.timeline-visualization-wrapper{padding:6px 10px}.timeline-visualization{position:relative;height:64px;background-color:#2c2c2c;border:1px solid #555;border-radius:4px;cursor:pointer;overflow:hidden}.timeline-scale{position:absolute;top:0;left:0;right:0;height:18px;border-bottom:1px solid #444}.tick{position:absolute;top:0;width:1px;height:100%;background:#555}.tick.minor{height:60%;opacity:.6}.tick.major{height:100%;background:#888}.tick-label{position:absolute;top:0;transform:translate(-50%);font-size:10px;color:#bbb;-webkit-user-select:none;user-select:none;padding-top:2px}.timeline-entry-block{position:absolute;top:22px;bottom:6px;border-radius:2px;opacity:.9}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff5252;box-shadow:0 0 3px #ff5252cc}.current-frame-label,.duration-label{margin-left:12px}.current-frame-input,.duration-input{margin-left:6px;width:90px}.time-slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.time-slider-header h3{margin:0;font-size:1.1em}.toggle-visibility-button{background:none;border:1px solid #444;color:#888;border-radius:4px;cursor:pointer;padding:2px 8px;transition:all .2s}.toggle-visibility-button:hover{color:#fff;background:#444}.slider-controls{margin-bottom:15px}.time-range-slider{width:100%;cursor:pointer}.time-labels{display:flex;justify-content:space-between;font-size:.85em;color:#888;margin-top:5px}.playback-controls{display:flex;align-items:center;gap:15px;margin-bottom:20px}.animation-previewer-container{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:90%;max-width:1000px;background:#1e1e2ed9;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);color:#eee;padding:20px;box-sizing:border-box;border:1px solid rgba(255,255,255,.1);border-radius:25px;font-family:Segoe UI,Roboto,sans-serif;font-size:14px;z-index:10;display:flex;flex-direction:column;gap:15px;box-shadow:0 10px 30px #00000080}.animation-previewer-container h4{margin:0 0 5px;padding-bottom:5px;border-bottom:2px solid rgba(0,255,204,.3);color:#0fc;font-weight:700;text-transform:uppercase;letter-spacing:1px}.preview-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.preview-controls .form-group{display:flex;align-items:center;gap:5px}.preview-controls .form-group.inline{margin-left:10px}.preview-controls select,.preview-controls input[type=number]{padding:4px 6px;background-color:#333;border:1px solid #666;color:#eee;border-radius:3px}.preview-controls button{padding:5px 10px;font-size:1.1em;cursor:pointer;border:1px solid #666;background-color:#444;color:#eee;border-radius:4px}.preview-controls button:hover{background-color:#555}.preview-controls button:disabled{opacity:.5;cursor:not-allowed}.frame-display{font-weight:700;margin:0 10px;background-color:#0000004d;padding:3px 6px;border-radius:3px;min-width:100px;text-align:center;transition:all .3s ease}.frame-display-playing{background-color:#2c7fb8;color:#fff;font-size:1.1em;box-shadow:0 0 5px #ffffff4d;transform:scale(1.05)}.preview-slider{width:100%}.preview-slider input[type=range]{width:100%;cursor:pointer;height:8px;background:#555;border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.preview-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#ffc107;border-radius:50%;cursor:pointer}.preview-slider input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#ffc107;border-radius:50%;cursor:pointer;border:none}.preview-slider input[type=range]:disabled::-webkit-slider-thumb{background:#888}.preview-slider input[type=range]:disabled::-moz-range-thumb{background:#888}.marking-controls{display:flex;gap:10px;align-items:center}.marking-controls button{padding:6px 12px;cursor:pointer;border:1px solid #666;background-color:#444;color:#eee;border-radius:4px}.marking-controls button:hover:not(:disabled){background-color:#555}.marking-controls button:disabled{opacity:.5;cursor:not-allowed}.marking-controls .copy-button{background-color:#198754;border-color:#157347;margin-left:auto}.marking-controls .copy-button:hover:not(:disabled){background-color:#146c43}.marking-controls .button-clicked{background-color:#0d6efd!important;border-color:#0a58ca!important;color:#fff!important;transform:scale(1.05);box-shadow:0 0 8px #0d6efd80;transition:all .1s ease}.timeline-visualization{position:relative}.selection-range{position:absolute;top:0;bottom:0;background:#2ecc7140;border:1px solid #2ecc71;box-sizing:border-box;cursor:move;z-index:2}.selection-range .range-handle{position:absolute;top:0;bottom:0;width:6px;background:#2ecc71e6;cursor:ew-resize;z-index:3}.selection-range .range-handle.left{left:-3px}.selection-range .range-handle.right{right:-3px}.audio-player{background-color:#2a2a2a;border-radius:5px;padding:10px;margin-bottom:10px;color:#fff}.audio-player h4{margin-top:0;margin-bottom:10px;color:#fff;font-size:16px}.audio-controls{justify-content:space-between;align-items:center;margin-bottom:10px}.song-selection{display:flex;align-items:center;gap:10px}.song-selection select{padding:5px;border-radius:3px;background-color:#444;color:#fff;border:1px solid #555}.volume-control{display:flex;align-items:center;gap:5px}.mute-button{background-color:#444;color:#fff;border:none;border-radius:3px;padding:5px 8px;cursor:pointer}.mute-button.muted{background-color:#666}.volume-slider{width:80px;height:5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#555;outline:none;border-radius:3px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer}