body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#1a1a1a;color:#f0f0f0;margin:0;padding:20px;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;box-sizing:border-box}#root{width:100%;max-width:1200px;display:flex;flex-direction:column;gap:20px}h1{text-align:center;color:#0af;margin-top:0}.container{display:flex;flex-direction:column;gap:20px;background-color:#2a2a2a;padding:24px;border-radius:12px;box-shadow:0 8px 24px #0000004d}.uploader{padding:40px 20px;border:2px dashed #444;border-radius:8px;text-align:center;cursor:pointer;transition:background-color .2s,border-color .2s}.uploader:hover{background-color:#333;border-color:#0af}.uploader p{margin:8px 0 0;font-size:1.2em}.uploader small{color:#aaa}input[type=file]{display:none}.editor{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:flex-start}canvas{border:1px solid #444;max-width:100%;height:auto;object-fit:contain;background-color:#000;border-radius:8px}.controls{display:flex;flex-direction:column;gap:16px;width:100%;max-width:320px;flex-grow:1}.segmented-control{display:flex;width:100%;background-color:#3a3a3a;border-radius:6px;border:1px solid #555;overflow:hidden;padding:2px}.segmented-control button{flex:1;padding:10px 12px;background-color:transparent;border:none;color:#ccc;font-weight:500;transition:background-color .2s ease-in-out,color .2s ease-in-out;cursor:pointer;border-radius:4px}.segmented-control button:hover:not(.active){background-color:#ffffff0d;transform:none}.segmented-control button.active{color:#fff;font-weight:700;box-shadow:0 1px 3px #0003}.segmented-control button.active{background-color:#08c}.segmented-control button.rect-type-attack.active{background-color:#c33}.segmented-control button.rect-type-hurt.active{background-color:#36c}.segmented-control button.rect-type-invincible.active{background-color:#00b359}.video-controls{display:flex;flex-direction:column;gap:10px;background-color:#333;padding:16px;border-radius:8px}.video-controls label{font-size:.9em;color:#ccc;font-weight:700}input[type=range]{width:100%;cursor:pointer}.frame-info{display:flex;justify-content:space-between;align-items:center;text-align:center;font-family:monospace;background-color:#1a1a1a;padding:4px 8px;border-radius:4px;font-size:1.1em}.frame-info button{background:#444;padding:4px 10px;min-width:30px;font-size:1.2em}.frame-info button:hover:not(:disabled){background:#555}.frame-info span{flex-grow:1}.gif-range-controls{display:flex;flex-direction:column;gap:10px;background-color:#333;padding:16px;border-radius:8px}.gif-range-controls label{font-size:.9em;color:#ccc;font-weight:700;margin-bottom:6px}.range-slider{display:flex;align-items:center;gap:12px}.range-slider span{font-family:monospace;font-size:.9em;min-width:80px}button{background-color:#0af;color:#fff;border:none;padding:12px 20px;border-radius:5px;cursor:pointer;font-size:1em;font-weight:700;transition:background-color .2s,transform .1s}button:hover:not(:disabled){background-color:#08c;transform:translateY(-1px)}button:disabled{background-color:#555;cursor:not-allowed;opacity:.7}.export-buttons{margin-top:auto;display:flex;flex-direction:column;gap:10px}.status{text-align:center;min-height:20px;color:#ffc107;background-color:#ffc1071a;padding:8px;border-radius:4px}.error{color:#f44336;text-align:center;background-color:#f443361a;padding:10px;border-radius:4px}